feat(code-block): components theming with CSS-vars (#DS-2806) (#271)

Author: sk8knut

docs/guides/theming-2.0.md

@@ -60,6 +60,7 @@
 -   [button](/packages/components/button/button-tokens.scss)
 -   [button-toggle](/packages/components/button-toggle/button-toggle-tokens.scss)
 -   [checkbox,pseudo-checkbox](/packages/components/checkbox/checkbox-tokens.scss)
+-   [code-block](/packages/components/code-block/code-block-tokens.scss)
 -   [datepicker](/packages/components/datepicker/datepicker-tokens.scss)
 -   [divider](/packages/components/divider/divider-tokens.scss)
 -   [dropdown](/packages/components/dropdown/dropdown-tokens.scss)

packages/components/code-block/_code-block-theme.scss

@@ -65,7 +65,7 @@ const hasScroll = (element: HTMLElement) => {
     selector: 'kbq-code-block',
     exportAs: 'kbqCodeBlock',
     templateUrl: './code-block.component.html',
-    styleUrls: ['./code-block.scss'],
+    styleUrls: ['./code-block.scss', './code-block-tokens.scss'],
     host: {
         class: 'kbq-code-block',
         '[class.kbq-code-block_filled]': 'filled',

packages/components/code-block/code-block-tokens.scss

@@ -1,9 +1,8 @@
 @use 'sass:meta';
 @use 'sass:map';
-@use '../core/styles/tokens';
 @use '../core/styles/common/tokens' as *;
 
-$tokens: meta.module-variables(tokens) !default;
+@use './code-block-theme' as *;
 
 $border-radius: kbq-css-variable(code-block-size-container-border-radius);
 $border-width: kbq-css-variable(code-block-size-container-border-width);
@@ -199,3 +198,6 @@ $border-width: kbq-css-variable(code-block-size-container-border-width);
         border-radius: kbq-css-variable(button-size-border-radius);
     }
 }
+
+@include kbq-code-block-theme();
+@include kbq-code-block-typography();

packages/components/code-block/code-block.component.ts

@@ -5,7 +5,6 @@
 
 @use 'theming/scrollbar-theme' as *;
 
-@use '../../code-block/code-block-theme' as *;
 @use '../../empty-state/empty-state-theme' as *;
 @use '../../file-upload/file-upload-theme' as *;
 @use '../../link/link-theme' as *;
@@ -40,7 +39,6 @@
 @mixin koobiq-theme($theme) {
     @include kbq-core-theme($theme);
 
-    @include kbq-code-block-theme($theme);
     @include kbq-dl-theme($theme);
     @include kbq-empty-state-theme($theme);
     @include kbq-file-upload-theme($theme);
@@ -86,7 +84,6 @@
     @include kbq-base-typography();
     @include kbq-markdown-base-typography();
 
-    @include kbq-code-block-typography($config);
     @include kbq-empty-state-typography($config);
     @include kbq-dl-typography($config);
     @include kbq-file-upload-typography($config);

packages/components/code-block/code-block.scss

@@ -20,6 +20,7 @@ const componentsWithCss = [
     'button',
     'button-toggle',
     'checkbox',
+    'code-block',
     'datepicker',
     'divider',
     'dropdown',

packages/components/core/styles/_koobiq-theme.scss

@@ -5,6 +5,7 @@ const { formatHelpers } = require('style-dictionary');
 const filter = {
     autocomplete: 'select-panel-dropdown',
     button: 'kbq-states-focused-color',
+    'code-block': 'kbq-states-focused-color',
     'pseudo-checkbox': 'checkbox',
     datepicker: 'states-foreground-disabled',
     dropdown: ['kbq-list', 'foreground-contrast-secondary'],