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 - -``` - -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; }