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
Kong · Sep 13, 2023 · 65adf7b · 65adf7b
1 parent d9b2c3f
commit 65adf7b
Show file tree

Hide file tree

Showing 11 changed files with 57 additions and 43 deletions.
diff --git a/.github/workflows/pr-preview-packages.yaml 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,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
@@ -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
@@ -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
@@ -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
@@ -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"