From dec6be006ee7676508bffd1d264a4c9f7b0b3471 Mon Sep 17 00:00:00 2001
From: Adam DeHaven <adam.dehaven@konghq.com>
Date: Wed, 13 Sep 2023 11:43:40 -0400
Subject: [PATCH 1/9] feat(style): remove usage of kongponents css custom props
 [KHCP-8877]

Remove the usage and import of the kongponents css custom properties.
---
 package.json                     |  2 +-
 sandbox/elements/ElementsApp.vue |  2 +-
 src/assets/styles/app.scss       |  8 ++++----
 vite.config.ts                   | 15 +++++++++++++++
 yarn.lock                        |  9 +++++----
 5 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index 3e710a0ca..6cd3c9e4f 100644
--- a/package.json
+++ b/package.json
@@ -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": "^9.0.0-pr.1725.1d9bb913.0",
     "@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..cdae880aa 100644
--- a/src/assets/styles/app.scss
+++ b/src/assets/styles/app.scss
@@ -1,14 +1,14 @@
 /*! KONG_AUTH_INJECT_STYLES */
 
-@use "sass:meta";
+// @use "sass:meta";
 // Import Kong Design Tokens
-@import "@kong/design-tokens/tokens/scss/_variables";
+// @import "@kong/design-tokens/tokens/scss/_variables";
 // Import Kongponents Sass variables
-@import "@kong/kongponents/dist/_variables";
+// @import "@kong/kongponents/dist/_variables";
 
 .kong-auth-element {
   // Include and Scope Kongponents CSS Variables
-  @include kongponents-css-variables;
+  // @include kongponents-css-variables;
   // Import Kongponents styles
   @include meta.load-css("@kong/kongponents/dist/style.css");
   // Import kong-auth-element styles
diff --git a/vite.config.ts b/vite.config.ts
index cddf81214..e7f39113e 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -92,6 +92,21 @@ export default ({ mode }) => {
         },
       }),
     ],
+    css: {
+      devSourcemap: true,
+      preprocessorOptions: {
+        scss: {
+          // We inject `@use "sass:meta" here as it is needed in the `src/assets/styles/app.scss` file before any other style rules.
+          // -----
+          // Inject the @kong/design-tokens SCSS variables to make them available for all components.
+          // This is not needed in host applications.
+          additionalData: `
+            @use "sass:meta";
+            @import "@kong/design-tokens/tokens/scss/variables";
+          `,
+        },
+      },
+    },
     resolve: {
       alias: {
         // Alias to the /src directory
diff --git a/yarn.lock b/yarn.lock
index 26540c091..cb23271e3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -577,11 +577,12 @@
   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@^9.0.0-pr.1725.1d9bb913.0":
+  version "9.0.0-pr.1725.1d9bb913.0"
+  resolved "https://registry.yarnpkg.com/@kong/kongponents/-/kongponents-9.0.0-pr.1725.1d9bb913.0.tgz#4e6cf839effa6d73d5b4c033e7f38cf8e5335566"
+  integrity sha512-mG7DV0EF25o2p2u1hDQPdJMa4oHl+L5K1wLAKCBdseLl03nZa8RV7dvIId5jOAWQkGXGOeVXjIDCFcQopQ+ypQ==
   dependencies:
+    "@kong/icons" "^1.4.3"
     axios "^0.27.2"
     date-fns "^2.30.0"
     date-fns-tz "^2.0.0"

From 1d6c7988423651ab67bdc04cc77cb377ef951474 Mon Sep 17 00:00:00 2001
From: Adam DeHaven <adam.dehaven@konghq.com>
Date: Wed, 13 Sep 2023 11:49:06 -0400
Subject: [PATCH 2/9] fix: remove css props

---
 README.md                  | 22 ++--------------------
 src/assets/styles/app.scss | 10 +---------
 2 files changed, 3 insertions(+), 29 deletions(-)

diff --git a/README.md b/README.md
index 934106086..b48909227 100644
--- a/README.md
+++ b/README.md
@@ -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/src/assets/styles/app.scss b/src/assets/styles/app.scss
index cdae880aa..450922bfe 100644
--- a/src/assets/styles/app.scss
+++ b/src/assets/styles/app.scss
@@ -1,14 +1,6 @@
 /*! KONG_AUTH_INJECT_STYLES */
 
-// @use "sass:meta";
-// Import Kong Design Tokens
-// @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 +9,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;
 }

From 6b3d6a97d880f260ea8ed8062b37f315e9db07bd Mon Sep 17 00:00:00 2001
From: Adam DeHaven <adam.dehaven@konghq.com>
Date: Wed, 13 Sep 2023 11:51:09 -0400
Subject: [PATCH 3/9] fix: linting

---
 package.json                                       | 6 +++---
 src/composables/useI18n.ts                         | 2 +-
 src/elements/kong-auth-login/KongAuthLogin.spec.ts | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 6cd3c9e4f..08dee7f8d 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",
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')

From ba5a94dd55ae706ee7f90272a4530c7c5e430852 Mon Sep 17 00:00:00 2001
From: Adam DeHaven <adam.dehaven@konghq.com>
Date: Wed, 13 Sep 2023 12:22:02 -0400
Subject: [PATCH 4/9] fix: sass imports

---
 src/assets/styles/app.scss |  4 ++++
 vite.config.ts             | 12 ------------
 2 files changed, 4 insertions(+), 12 deletions(-)

diff --git a/src/assets/styles/app.scss b/src/assets/styles/app.scss
index 450922bfe..2db33313c 100644
--- a/src/assets/styles/app.scss
+++ b/src/assets/styles/app.scss
@@ -1,5 +1,9 @@
 /*! KONG_AUTH_INJECT_STYLES */
 
+@use "sass:meta";
+// Import Kong Design Tokens - has to be done here afer `sass:meta`
+@import "@kong/design-tokens/tokens/scss/_variables";
+
 .kong-auth-element {
   // Import Kongponents styles
   @include meta.load-css("@kong/kongponents/dist/style.css");
diff --git a/vite.config.ts b/vite.config.ts
index e7f39113e..c7cbbaa19 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -94,18 +94,6 @@ export default ({ mode }) => {
     ],
     css: {
       devSourcemap: true,
-      preprocessorOptions: {
-        scss: {
-          // We inject `@use "sass:meta" here as it is needed in the `src/assets/styles/app.scss` file before any other style rules.
-          // -----
-          // Inject the @kong/design-tokens SCSS variables to make them available for all components.
-          // This is not needed in host applications.
-          additionalData: `
-            @use "sass:meta";
-            @import "@kong/design-tokens/tokens/scss/variables";
-          `,
-        },
-      },
     },
     resolve: {
       alias: {

From ecdae987c81001416820c9240b963f0fa2450688 Mon Sep 17 00:00:00 2001
From: Adam DeHaven <adam.dehaven@konghq.com>
Date: Wed, 13 Sep 2023 13:47:49 -0400
Subject: [PATCH 5/9] ci: verify no pr preview packages

---
 .github/workflows/pr-preview-packages.yaml | 16 ++++++++++++++++
 README.md                                  |  4 ++--
 2 files changed, 18 insertions(+), 2 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..bb61088eb
--- /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 references
+    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/README.md b/README.md
index b48909227..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%;

From c0dae711aafa29de105d50bfc04980cddc0deb74 Mon Sep 17 00:00:00 2001
From: Adam DeHaven <adam.dehaven@konghq.com>
Date: Wed, 13 Sep 2023 13:48:54 -0400
Subject: [PATCH 6/9] chore: rename job

---
 .github/workflows/pr-preview-packages.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/pr-preview-packages.yaml b/.github/workflows/pr-preview-packages.yaml
index bb61088eb..ffe99234b 100644
--- a/.github/workflows/pr-preview-packages.yaml
+++ b/.github/workflows/pr-preview-packages.yaml
@@ -6,7 +6,7 @@ on:
 
 jobs:
   check-packages:
-    name: No PR preview references
+    name: No PR preview packages
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code

From 3f2ef05965215a53183a9dff92bfb7a026ddd137 Mon Sep 17 00:00:00 2001
From: Adam DeHaven <adam.dehaven@konghq.com>
Date: Wed, 13 Sep 2023 13:51:18 -0400
Subject: [PATCH 7/9] chore(deps): update kongponents

---
 package.json | 2 +-
 yarn.lock    | 9 ++++-----
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 08dee7f8d..7e857dc1d 100644
--- a/package.json
+++ b/package.json
@@ -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": "^9.0.0-pr.1725.1d9bb913.0",
+    "@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/yarn.lock b/yarn.lock
index cb23271e3..8732dab04 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -577,12 +577,11 @@
   resolved "https://registry.yarnpkg.com/@kong/icons/-/icons-1.4.3.tgz#1686da86dd13b6cb6995933067dfcc2675a6e023"
   integrity sha512-MymjAY044yG633C/tsxtdITk92g+EiRFhloTNBkrg+d5LFaBjz6Zw7YGStAAy+4Spy8jGmrGlJPmWiavOU1+Bg==
 
-"@kong/kongponents@^9.0.0-pr.1725.1d9bb913.0":
-  version "9.0.0-pr.1725.1d9bb913.0"
-  resolved "https://registry.yarnpkg.com/@kong/kongponents/-/kongponents-9.0.0-pr.1725.1d9bb913.0.tgz#4e6cf839effa6d73d5b4c033e7f38cf8e5335566"
-  integrity sha512-mG7DV0EF25o2p2u1hDQPdJMa4oHl+L5K1wLAKCBdseLl03nZa8RV7dvIId5jOAWQkGXGOeVXjIDCFcQopQ+ypQ==
+"@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:
-    "@kong/icons" "^1.4.3"
     axios "^0.27.2"
     date-fns "^2.30.0"
     date-fns-tz "^2.0.0"

From 64671c5e2bbf18455c7518b08a9c910938e0a7e3 Mon Sep 17 00:00:00 2001
From: Adam DeHaven <adam.dehaven@konghq.com>
Date: Wed, 13 Sep 2023 13:53:50 -0400
Subject: [PATCH 8/9] chore: add stylelint plugin

---
 .stylelintrc.cjs | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

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}]
+  }
 }

From 8fb32aada430a630ef2eaeb1f60d0ae342d7e0ec Mon Sep 17 00:00:00 2001
From: Adam DeHaven <adam.dehaven@konghq.com>
Date: Wed, 13 Sep 2023 13:54:29 -0400
Subject: [PATCH 9/9] ci: stylelint

---
 .github/workflows/test.yaml | 3 +++
 1 file changed, 3 insertions(+)

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