From 65adf7bb25ca431d3784d6b36fb3cd204ce337e8 Mon Sep 17 00:00:00 2001
From: Adam DeHaven <2229946+adamdehaven@users.noreply.github.com>
Date: Wed, 13 Sep 2023 14:20:44 -0400
Subject: [PATCH] feat(style): remove usage of kongponents css custom props
 [KHCP-8877] (#1324)

* feat(style): remove usage of kongponents css custom props [KHCP-8877]

Remove the usage and import of the kongponents css custom properties.

* fix: remove css props

* fix: linting

* fix: sass imports

* ci: verify no pr preview packages

* chore: rename job

* chore(deps): update kongponents

* chore: add stylelint plugin

* ci: stylelint
---
 .github/workflows/pr-preview-packages.yaml    | 16 ++++++++++++
 .github/workflows/test.yaml                   |  3 +++
 .stylelintrc.cjs                              | 22 +++++++++++++---
 README.md                                     | 26 +++----------------
 package.json                                  |  8 +++---
 sandbox/elements/ElementsApp.vue              |  2 +-
 src/assets/styles/app.scss                    |  8 ++----
 src/composables/useI18n.ts                    |  2 +-
 .../kong-auth-login/KongAuthLogin.spec.ts     |  2 +-
 vite.config.ts                                |  3 +++
 yarn.lock                                     |  8 +++---
 11 files changed, 57 insertions(+), 43 deletions(-)
 create mode 100644 .github/workflows/pr-preview-packages.yaml

diff --git a/.github/workflows/pr-preview-packages.yaml b/.github/workflows/pr-preview-packages.yaml
new file mode 100644
index 000000000..ffe99234b
--- /dev/null
+++ b/.github/workflows/pr-preview-packages.yaml
@@ -0,0 +1,16 @@
+name: Verify PR does not utilize package previews
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  check-packages:
+    name: No PR preview packages
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: No PR preview references
+        uses: Kong/public-shared-actions/pr-previews/validate@main
diff --git a/.github/workflows/test.yaml b/.github/workflows/test.yaml
index 25bd4aa48..2291989c7 100644
--- a/.github/workflows/test.yaml
+++ b/.github/workflows/test.yaml
@@ -53,6 +53,9 @@ jobs:
       - name: Install dependencies
         run: yarn install --frozen-lockfile
 
+      - name: Stylelint
+        run: yarn stylelint
+
       - name: Lint
         run: yarn lint
 
diff --git a/.stylelintrc.cjs b/.stylelintrc.cjs
index 4da05a6d0..b7ca342e8 100644
--- a/.stylelintrc.cjs
+++ b/.stylelintrc.cjs
@@ -14,13 +14,27 @@ module.exports = {
         'unit-disallowed-list': [
           ['rem', 'em'],
         ],
+        // Only allow @kong/design-tokens CSS custom properties
+        'custom-property-pattern': [
+          "^(kui).+$",
+          {
+            message: "Expected custom property \"%s\" to be sourced from @kong/design-tokens with prefix '--kui-'",
+          }
+        ],
+        'custom-property-no-missing-var-function': true,
         // Disable the following rules
-        'custom-property-no-missing-var-function': null,
         'no-descending-specificity': null,
-        'scss/at-import-no-partial-leading-underscore': null
+        'scss/at-import-no-partial-leading-underscore': null,
+        'no-extra-semicolons': null
       }
     }
   ],
-  plugins: [ 'stylelint-order' ],
-  rules: { 'order/properties-alphabetical-order': true }
+  plugins: [
+    'stylelint-order',
+    '@kong/design-tokens/stylelint-plugin'
+  ],
+  rules: {
+    'order/properties-alphabetical-order': true,
+    '@kong/design-tokens/use-proper-token': [true, {disableFix: true}]
+  }
 }
diff --git a/README.md b/README.md
index 934106086..da1192d8b 100644
--- a/README.md
+++ b/README.md
@@ -156,7 +156,7 @@ const options: KongAuthElementsOptions = {
   apiBaseUrl: 'https://us.api.konghq.com/kauth',
   userEntity: 'user',
   shadowDom: true,
-  injectCss: ['.kong-auth-login-form .k-input#email { background-color: var(--red-400, #ff0000) }'],
+  injectCss: ['.kong-auth-login-form .k-input#email { background-color: #ff0000 }'],
   lang: 'en', // Exclude to default to English
 }
 
@@ -276,7 +276,7 @@ const pluginOptions: KongAuthElementsOptions = {
   apiBaseUrl: 'https://us.api.konghq.com/kauth',
   userEntity: 'user',
   injectCss: [
-    '.kong-auth-login-form .k-input#email { background-color: var(--red-400, #ff0000) }',
+    '.kong-auth-login-form .k-input#email { background-color: #ff0000 }',
     `
     .kong-auth-register-form .k-input {
       width: 50%;
@@ -338,31 +338,13 @@ document.querySelector('kong-auth-login').addEventListener('login-success', func
 
 ### Theming with CSS Variables
 
-Several custom CSS variables are available to impact the styling of custom elements, shown below
-
-| Variable               | Purpose                                        |
-| :--------------------- | :--------------------------------------------- |
-| `--KongAuthFontFamily` | Default font family                            |
-| `--KongAuthFontWeight` | Default font weight when not set by Kongponent |
-
-Simply define values for the variables in your consuming application to make them available to the custom elements
-
-```css
-<style>
-:root {
-  --KongAuthFontFamily: 'Roboto';
-  --KongAuthFontWeight: 400;
-}
-</style>
-```
-
-You may also utilize any CSS variables included in the [Kongponents component library](https://beta.kongponents.konghq.com/guide/theming.html).
+You may utilize any CSS variables included in the [Kongponents component library](https://kongponents.konghq.com).
 
 In order to override the built-in CSS variables, you will need to scope your custom values to the `.kong-auth-element` selector as shown here
 
 ```css
 .kong-auth-element {
-  --KButtonPrimaryBase: #007ac1; /* set .k-button.primary to a custom color */
+  --kui-color-text-primary: green;
 }
 ```
 
diff --git a/package.json b/package.json
index 3e710a0ca..7e857dc1d 100644
--- a/package.json
+++ b/package.json
@@ -17,9 +17,9 @@
     "dev:elements": "cross-env SANDBOX=elements vite",
     "typecheck": "vue-tsc --noEmit",
     "lint": "eslint '**/*.{js,ts,vue}'",
-    "lint:fix": "eslint '**/*.{js,ts,vue}' --fix",
-    "stylelint": "stylelint './src/**/*.{css,scss,sass,less,styl,vue}'",
-    "stylelint:fix": "stylelint './src/**/*.{css,scss,sass,less,styl,vue}' --fix",
+    "lint:fix": "yarn lint --fix",
+    "stylelint": "stylelint './src/**/*.{css,scss,sass,vue}'",
+    "stylelint:fix": "yarn stylelint --fix",
     "test": "cypress run --component -b chrome",
     "test:open": "cypress open --component -b chrome",
     "test:spec": "cypress run --component -b chrome --spec",
@@ -50,7 +50,7 @@
     "@digitalroute/cz-conventional-changelog-for-jira": "^8.0.1",
     "@evilmartians/lefthook": "^1.4.10",
     "@kong/design-tokens": "^1.10.2",
-    "@kong/kongponents": "^8.123.6",
+    "@kong/kongponents": "^8.123.7",
     "@rushstack/eslint-patch": "^1.3.3",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
diff --git a/sandbox/elements/ElementsApp.vue b/sandbox/elements/ElementsApp.vue
index e8abc17bb..bbed230c4 100644
--- a/sandbox/elements/ElementsApp.vue
+++ b/sandbox/elements/ElementsApp.vue
@@ -8,7 +8,7 @@
         <kong-auth-login
           .basic-auth-login-enabled="true"
           .idp-login-enabled="true"
-          idp-login-return-to="https://hydrogen.ephemeral.konnect-dev.konghq.com/"
+          idp-login-return-to="https://cloud.konghq.tech/"
           instruction-text="This is the instruction text"
           show-forgot-password-link
           wrapper-id="kong-auth-login-wrapper"
diff --git a/src/assets/styles/app.scss b/src/assets/styles/app.scss
index 80115f431..2db33313c 100644
--- a/src/assets/styles/app.scss
+++ b/src/assets/styles/app.scss
@@ -1,14 +1,10 @@
 /*! KONG_AUTH_INJECT_STYLES */
 
 @use "sass:meta";
-// Import Kong Design Tokens
+// Import Kong Design Tokens - has to be done here afer `sass:meta`
 @import "@kong/design-tokens/tokens/scss/_variables";
-// Import Kongponents Sass variables
-@import "@kong/kongponents/dist/_variables";
 
 .kong-auth-element {
-  // Include and Scope Kongponents CSS Variables
-  @include kongponents-css-variables;
   // Import Kongponents styles
   @include meta.load-css("@kong/kongponents/dist/style.css");
   // Import kong-auth-element styles
@@ -17,6 +13,6 @@
   font-family: var(--kui-font-family-text, $kui-font-family-text);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  font-weight: var(--KongAuthFontWeight, var(--kui-font-weight-regular, $kui-font-weight-regular));
+  font-weight: var(--kui-font-weight-regular, $kui-font-weight-regular);
   position: relative;
 }
diff --git a/src/composables/useI18n.ts b/src/composables/useI18n.ts
index d6eb4f714..1c01f2a01 100644
--- a/src/composables/useI18n.ts
+++ b/src/composables/useI18n.ts
@@ -11,7 +11,7 @@ export default function useI18n(lang: SupportedLanguages = 'en') {
   let messages
 
   const languages: MessageLanguages = {
-    en: en,
+    en,
   }
 
   // If lang exists, set to use provided language
diff --git a/src/elements/kong-auth-login/KongAuthLogin.spec.ts b/src/elements/kong-auth-login/KongAuthLogin.spec.ts
index b8178a8ec..56940d011 100644
--- a/src/elements/kong-auth-login/KongAuthLogin.spec.ts
+++ b/src/elements/kong-auth-login/KongAuthLogin.spec.ts
@@ -552,7 +552,7 @@ describe('KongAuthLogin.ce.vue', () => {
       const portalId = '12345-67890'
       cy.stub(getConfigOptions, 'userEntity').returns('developer')
       cy.stub(getConfigOptions, 'developerConfig').returns({
-        portalId: portalId,
+        portalId,
       })
       cy.stub(win, 'getLocationPathname').returns('/login/sso')
       cy.stub(win, 'setLocationHref').as('set-location')
diff --git a/vite.config.ts b/vite.config.ts
index cddf81214..c7cbbaa19 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -92,6 +92,9 @@ export default ({ mode }) => {
         },
       }),
     ],
+    css: {
+      devSourcemap: true,
+    },
     resolve: {
       alias: {
         // Alias to the /src directory
diff --git a/yarn.lock b/yarn.lock
index 26540c091..8732dab04 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -577,10 +577,10 @@
   resolved "https://registry.yarnpkg.com/@kong/icons/-/icons-1.4.3.tgz#1686da86dd13b6cb6995933067dfcc2675a6e023"
   integrity sha512-MymjAY044yG633C/tsxtdITk92g+EiRFhloTNBkrg+d5LFaBjz6Zw7YGStAAy+4Spy8jGmrGlJPmWiavOU1+Bg==
 
-"@kong/kongponents@^8.123.6":
-  version "8.123.6"
-  resolved "https://registry.yarnpkg.com/@kong/kongponents/-/kongponents-8.123.6.tgz#71b3d358ceac9756015ce204c1edffdace6e5fb6"
-  integrity sha512-+Vni1ax3+6qqgNVS9Drj8fHv+z35FMt2lDzkGi9cFrfZn2LVMjuAh4xZ72R6shES+a7REnWTMuyx6s9fAxDAew==
+"@kong/kongponents@^8.123.7":
+  version "8.123.7"
+  resolved "https://registry.yarnpkg.com/@kong/kongponents/-/kongponents-8.123.7.tgz#1229f1fc906fa355e96b0bba7e50c16e66fe5a2d"
+  integrity sha512-QYKAFzpxvK7zFt/t9YaEiic87+q/IEFdyFZzC4LwuzKFeFjatg3NSoQJXTj9C87LEWpxhvlI1qyruwAY1DxRMw==
   dependencies:
     axios "^0.27.2"
     date-fns "^2.30.0"