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

Remove the usage and import of the kongponents css custom properties.
Kong · Sep 13, 2023 · dec6be0 · dec6be0
1 parent d9b2c3f
commit dec6be0
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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"