@koobiq/components 17.4.0 → 17.6.0

package/code-block/code-block-tokens.scss

@@ -0,0 +1,400 @@
+.kbq-code-block {
+    --kbq-code-block-size-container-border-width: 1px;
+    --kbq-code-block-size-container-border-radius: 12px;
+    --kbq-code-block-size-with-header-content-padding-top: 4px;
+    --kbq-code-block-size-with-header-content-padding-bottom: 16px;
+    --kbq-code-block-size-with-header-content-padding-horizontal: 20px;
+    --kbq-code-block-size-with-header-content-content-gap-horizontal: 12px;
+    --kbq-code-block-size-no-header-content-padding-vertical: 14px;
+    --kbq-code-block-size-no-header-content-padding-horizontal: 20px;
+    --kbq-code-block-size-no-header-content-content-gap-horizontal: 12px;
+    --kbq-code-block-size-header-padding-vertical: 8px;
+    --kbq-code-block-size-header-padding-left: 12px;
+    --kbq-code-block-size-header-padding-right: 8px;
+    --kbq-code-block-size-header-content-gap-horizontal: 16px;
+    --kbq-code-block-size-actionbar-content-gap-horizontal: 2px;
+    --kbq-code-block-size-actionbar-padding-vertical: 8px;
+    --kbq-code-block-size-actionbar-padding-horizontal: 12px;
+    --kbq-code-block-size-actionbar-fade-gradient-width: 32px;
+    --kbq-code-block-size-collapse-expanded-padding-top: 0;
+    --kbq-code-block-size-collapse-expanded-padding-bottom: 16px;
+    --kbq-code-block-size-collapse-collapsed-padding-top: 32px;
+    --kbq-code-block-size-collapse-collapsed-padding-bottom: 16px;
+    --kbq-code-block-font-default-font-size: 14px;
+    --kbq-code-block-font-default-line-height: 20px;
+    --kbq-code-block-font-default-letter-spacing: normal;
+    --kbq-code-block-font-default-font-weight: normal;
+    --kbq-code-block-font-default-font-family: 'JetBrains Mono', 'Roboto Mono', 'Consolas', 'Menlo', 'Monaco', monospace;
+    --kbq-code-block-font-default-text-transform: null;
+    --kbq-code-block-font-default-font-feature-settings: initial;
+    --kbq-code-block-font-hljs-addition-font-style: null;
+    --kbq-code-block-font-hljs-addition-font-weight: null;
+    --kbq-code-block-font-hljs-attr-font-style: null;
+    --kbq-code-block-font-hljs-attr-font-weight: null;
+    --kbq-code-block-font-hljs-attribute-font-style: null;
+    --kbq-code-block-font-hljs-attribute-font-weight: null;
+    --kbq-code-block-font-hljs-built-in-font-style: null;
+    --kbq-code-block-font-hljs-built-in-font-weight: null;
+    --kbq-code-block-font-hljs-bullet-font-style: null;
+    --kbq-code-block-font-hljs-bullet-font-weight: null;
+    --kbq-code-block-font-hljs-char-escape-font-style: null;
+    --kbq-code-block-font-hljs-char-escape-font-weight: null;
+    --kbq-code-block-font-hljs-class-font-style: null;
+    --kbq-code-block-font-hljs-class-font-weight: null;
+    --kbq-code-block-font-hljs-code-font-style: null;
+    --kbq-code-block-font-hljs-code-font-weight: null;
+    --kbq-code-block-font-hljs-comment-font-style: null;
+    --kbq-code-block-font-hljs-comment-font-weight: null;
+    --kbq-code-block-font-hljs-deletion-font-style: null;
+    --kbq-code-block-font-hljs-deletion-font-weight: null;
+    --kbq-code-block-font-hljs-doctag-font-style: null;
+    --kbq-code-block-font-hljs-doctag-font-weight: null;
+    --kbq-code-block-font-hljs-emphasis-font-style: null;
+    --kbq-code-block-font-hljs-emphasis-font-weight: null;
+    --kbq-code-block-font-hljs-formula-font-style: null;
+    --kbq-code-block-font-hljs-formula-font-weight: null;
+    --kbq-code-block-font-hljs-function-font-style: null;
+    --kbq-code-block-font-hljs-function-font-weight: null;
+    --kbq-code-block-font-hljs-keyword-font-style: null;
+    --kbq-code-block-font-hljs-keyword-font-weight: null;
+    --kbq-code-block-font-hljs-link-font-style: null;
+    --kbq-code-block-font-hljs-link-font-weight: null;
+    --kbq-code-block-font-hljs-literal-font-style: null;
+    --kbq-code-block-font-hljs-literal-font-weight: null;
+    --kbq-code-block-font-hljs-meta-font-style: null;
+    --kbq-code-block-font-hljs-meta-font-weight: null;
+    --kbq-code-block-font-hljs-meta-keyword-font-style: null;
+    --kbq-code-block-font-hljs-meta-keyword-font-weight: null;
+    --kbq-code-block-font-hljs-meta-string-font-style: null;
+    --kbq-code-block-font-hljs-meta-string-font-weight: null;
+    --kbq-code-block-font-hljs-meta-prompt-font-style: null;
+    --kbq-code-block-font-hljs-meta-prompt-font-weight: null;
+    --kbq-code-block-font-hljs-name-font-style: null;
+    --kbq-code-block-font-hljs-name-font-weight: null;
+    --kbq-code-block-font-hljs-number-font-style: null;
+    --kbq-code-block-font-hljs-number-font-weight: null;
+    --kbq-code-block-font-hljs-operator-font-style: null;
+    --kbq-code-block-font-hljs-operator-font-weight: null;
+    --kbq-code-block-font-hljs-params-font-style: null;
+    --kbq-code-block-font-hljs-params-font-weight: null;
+    --kbq-code-block-font-hljs-property-font-style: null;
+    --kbq-code-block-font-hljs-property-font-weight: null;
+    --kbq-code-block-font-hljs-punctuation-font-style: null;
+    --kbq-code-block-font-hljs-punctuation-font-weight: null;
+    --kbq-code-block-font-hljs-quote-font-style: null;
+    --kbq-code-block-font-hljs-quote-font-weight: null;
+    --kbq-code-block-font-hljs-regexp-font-style: null;
+    --kbq-code-block-font-hljs-regexp-font-weight: null;
+    --kbq-code-block-font-hljs-section-font-style: null;
+    --kbq-code-block-font-hljs-section-font-weight: null;
+    --kbq-code-block-font-hljs-selector-attr-font-style: null;
+    --kbq-code-block-font-hljs-selector-attr-font-weight: null;
+    --kbq-code-block-font-hljs-selector-class-font-style: null;
+    --kbq-code-block-font-hljs-selector-class-font-weight: null;
+    --kbq-code-block-font-hljs-selector-id-font-style: null;
+    --kbq-code-block-font-hljs-selector-id-font-weight: null;
+    --kbq-code-block-font-hljs-selector-pseudo-font-style: null;
+    --kbq-code-block-font-hljs-selector-pseudo-font-weight: null;
+    --kbq-code-block-font-hljs-selector-tag-font-style: null;
+    --kbq-code-block-font-hljs-selector-tag-font-weight: null;
+    --kbq-code-block-font-hljs-string-font-style: null;
+    --kbq-code-block-font-hljs-string-font-weight: null;
+    --kbq-code-block-font-hljs-strong-font-style: null;
+    --kbq-code-block-font-hljs-strong-font-weight: null;
+    --kbq-code-block-font-hljs-subst-font-style: null;
+    --kbq-code-block-font-hljs-subst-font-weight: null;
+    --kbq-code-block-font-hljs-symbol-font-style: null;
+    --kbq-code-block-font-hljs-symbol-font-weight: null;
+    --kbq-code-block-font-hljs-tag-font-style: null;
+    --kbq-code-block-font-hljs-tag-font-weight: null;
+    --kbq-code-block-font-hljs-template-tag-font-style: null;
+    --kbq-code-block-font-hljs-template-tag-font-weight: null;
+    --kbq-code-block-font-hljs-template-variable-font-style: null;
+    --kbq-code-block-font-hljs-template-variable-font-weight: null;
+    --kbq-code-block-font-hljs-title-font-style: null;
+    --kbq-code-block-font-hljs-title-font-weight: null;
+    --kbq-code-block-font-hljs-title-class-font-style: normal;
+    --kbq-code-block-font-hljs-title-class-font-weight: 500;
+    --kbq-code-block-font-hljs-title-class-inherited-font-style: null;
+    --kbq-code-block-font-hljs-title-class-inherited-font-weight: null;
+    --kbq-code-block-font-hljs-title-function-font-style: null;
+    --kbq-code-block-font-hljs-title-function-font-weight: null;
+    --kbq-code-block-font-hljs-title-function-invoke-font-style: null;
+    --kbq-code-block-font-hljs-title-function-invoke-font-weight: null;
+    --kbq-code-block-font-hljs-type-font-style: null;
+    --kbq-code-block-font-hljs-type-font-weight: null;
+    --kbq-code-block-font-hljs-variable-font-style: null;
+    --kbq-code-block-font-hljs-variable-font-weight: null;
+    --kbq-code-block-font-hljs-variable-constant-font-style: null;
+    --kbq-code-block-font-hljs-variable-constant-font-weight: null;
+    --kbq-code-block-font-hljs-variable-language-font-style: null;
+    --kbq-code-block-font-hljs-variable-language-font-weight: null;
+}
+
+:where(.kbq-light, .theme-light, .kbq-theme-light) {
+    --kbq-states-focused-color: hsla(216, 100%, 50%, 100%);
+    --kbq-states-focused-color-error: hsla(7, 97%, 50%, 100%);
+    --kbq-code-block-filled-container-background: hsla(229, 15%, 95%, 100%);
+    --kbq-code-block-filled-container-border-color: transparent;
+    --kbq-code-block-filled-header-background: hsla(229, 15%, 95%, 100%);
+    --kbq-code-block-filled-header-shadow: 0px 1px 0px 0px hsla(229, 15%, 6%, 12%);
+    --kbq-code-block-filled-actionbar-fade-gradient: linear-gradient(90deg, transparent, hsla(229, 15%, 95%, 100%));
+    --kbq-code-block-filled-actionbar-background: hsla(229, 15%, 95%, 100%);
+    --kbq-code-block-filled-collapse-expanded-background: transparent;
+    --kbq-code-block-filled-collapse-collapsed-background: linear-gradient(
+        180deg,
+        hsla(225, 15%, 95%, 0%) 0%,
+        hsla(225, 15%, 95%, 100%) 100%
+    );
+    --kbq-code-block-filled-collapse-button-expand-background: hsla(229, 15%, 95%, 100%);
+    --kbq-code-block-outline-container-background: hsla(229, 15%, 100%, 100%);
+    --kbq-code-block-outline-container-border-color: hsla(229, 15%, 6%, 12%);
+    --kbq-code-block-outline-header-background: hsla(229, 15%, 100%, 100%);
+    --kbq-code-block-outline-header-shadow: 0px 1px 0px 0px hsla(229, 15%, 6%, 12%);
+    --kbq-code-block-outline-actionbar-fade-gradient: linear-gradient(90deg, transparent, hsla(229, 15%, 100%, 100%));
+    --kbq-code-block-outline-actionbar-background: hsla(229, 15%, 100%, 100%);
+    --kbq-code-block-outline-collapse-expanded-background: transparent;
+    --kbq-code-block-outline-collapse-collapsed-background: linear-gradient(
+        180deg,
+        hsla(0, 0%, 100%, 0%) 0%,
+        hsla(0, 0%, 100%, 100%) 100%
+    );
+    --kbq-code-block-outline-collapse-button-expand-background: hsla(229, 15%, 100%, 100%);
+    --kbq-code-block-hljs-addition-background: hsla(104, 64%, 95%, 100%);
+    --kbq-code-block-hljs-addition-color: hsla(104, 64%, 25%, 100%);
+    --kbq-code-block-hljs-attr-background: null;
+    --kbq-code-block-hljs-attr-color: null;
+    --kbq-code-block-hljs-attribute-background: null;
+    --kbq-code-block-hljs-attribute-color: null;
+    --kbq-code-block-hljs-built-in-background: null;
+    --kbq-code-block-hljs-built-in-color: null;
+    --kbq-code-block-hljs-bullet-background: null;
+    --kbq-code-block-hljs-bullet-color: null;
+    --kbq-code-block-hljs-char-escape-background: null;
+    --kbq-code-block-hljs-char-escape-color: null;
+    --kbq-code-block-hljs-class-background: null;
+    --kbq-code-block-hljs-class-color: null;
+    --kbq-code-block-hljs-code-background: null;
+    --kbq-code-block-hljs-code-color: null;
+    --kbq-code-block-hljs-comment-background: null;
+    --kbq-code-block-hljs-comment-color: hsla(229, 15%, 60%, 100%);
+    --kbq-code-block-hljs-deletion-background: hsla(7, 97%, 95%, 100%);
+    --kbq-code-block-hljs-deletion-color: hsla(7, 97%, 35%, 100%);
+    --kbq-code-block-hljs-doctag-background: null;
+    --kbq-code-block-hljs-doctag-color: null;
+    --kbq-code-block-hljs-emphasis-background: null;
+    --kbq-code-block-hljs-emphasis-color: null;
+    --kbq-code-block-hljs-formula-background: null;
+    --kbq-code-block-hljs-formula-color: null;
+    --kbq-code-block-hljs-function-background: null;
+    --kbq-code-block-hljs-function-color: null;
+    --kbq-code-block-hljs-keyword-background: null;
+    --kbq-code-block-hljs-keyword-color: null;
+    --kbq-code-block-hljs-line-numbers-color: hsla(229, 15%, 50%, 100%);
+    --kbq-code-block-hljs-link-background: null;
+    --kbq-code-block-hljs-link-color: null;
+    --kbq-code-block-hljs-literal-background: null;
+    --kbq-code-block-hljs-literal-color: hsla(277, 72%, 30%, 100%);
+    --kbq-code-block-hljs-meta-background: null;
+    --kbq-code-block-hljs-meta-color: hsla(216, 100%, 35%, 100%);
+    --kbq-code-block-hljs-meta-keyword-background: null;
+    --kbq-code-block-hljs-meta-keyword-color: null;
+    --kbq-code-block-hljs-meta-string-background: null;
+    --kbq-code-block-hljs-meta-string-color: hsla(216, 100%, 35%, 100%);
+    --kbq-code-block-hljs-meta-prompt-background: null;
+    --kbq-code-block-hljs-meta-prompt-color: null;
+    --kbq-code-block-hljs-name-background: null;
+    --kbq-code-block-hljs-name-color: hsla(216, 100%, 35%, 100%);
+    --kbq-code-block-hljs-number-background: null;
+    --kbq-code-block-hljs-number-color: hsla(277, 72%, 30%, 100%);
+    --kbq-code-block-hljs-operator-background: null;
+    --kbq-code-block-hljs-operator-color: null;
+    --kbq-code-block-hljs-params-background: null;
+    --kbq-code-block-hljs-params-color: null;
+    --kbq-code-block-hljs-property-background: null;
+    --kbq-code-block-hljs-property-color: null;
+    --kbq-code-block-hljs-punctuation-background: null;
+    --kbq-code-block-hljs-punctuation-color: null;
+    --kbq-code-block-hljs-quote-background: null;
+    --kbq-code-block-hljs-quote-color: null;
+    --kbq-code-block-hljs-regexp-background: null;
+    --kbq-code-block-hljs-regexp-color: hsla(104, 64%, 25%, 100%);
+    --kbq-code-block-hljs-section-background: null;
+    --kbq-code-block-hljs-section-color: null;
+    --kbq-code-block-hljs-selector-attr-background: null;
+    --kbq-code-block-hljs-selector-attr-color: null;
+    --kbq-code-block-hljs-selector-class-background: null;
+    --kbq-code-block-hljs-selector-class-color: null;
+    --kbq-code-block-hljs-selector-id-background: null;
+    --kbq-code-block-hljs-selector-id-color: null;
+    --kbq-code-block-hljs-selector-pseudo-background: null;
+    --kbq-code-block-hljs-selector-pseudo-color: null;
+    --kbq-code-block-hljs-selector-tag-background: null;
+    --kbq-code-block-hljs-selector-tag-color: hsla(216, 100%, 35%, 100%);
+    --kbq-code-block-hljs-string-background: null;
+    --kbq-code-block-hljs-string-color: hsla(104, 64%, 25%, 100%);
+    --kbq-code-block-hljs-strong-background: null;
+    --kbq-code-block-hljs-strong-color: null;
+    --kbq-code-block-hljs-subst-background: null;
+    --kbq-code-block-hljs-subst-color: null;
+    --kbq-code-block-hljs-symbol-background: null;
+    --kbq-code-block-hljs-symbol-color: hsla(216, 100%, 35%, 100%);
+    --kbq-code-block-hljs-tag-background: null;
+    --kbq-code-block-hljs-tag-color: null;
+    --kbq-code-block-hljs-template-tag-background: null;
+    --kbq-code-block-hljs-template-tag-color: null;
+    --kbq-code-block-hljs-template-variable-background: null;
+    --kbq-code-block-hljs-template-variable-color: null;
+    --kbq-code-block-hljs-title-background: null;
+    --kbq-code-block-hljs-title-color: hsla(216, 100%, 35%, 100%);
+    --kbq-code-block-hljs-title-class-background: null;
+    --kbq-code-block-hljs-title-class-color: null;
+    --kbq-code-block-hljs-title-class-inherited-background: null;
+    --kbq-code-block-hljs-title-class-inherited-color: null;
+    --kbq-code-block-hljs-title-function-background: null;
+    --kbq-code-block-hljs-title-function-color: null;
+    --kbq-code-block-hljs-title-function-invoke-background: null;
+    --kbq-code-block-hljs-title-function-invoke-color: null;
+    --kbq-code-block-hljs-type-background: null;
+    --kbq-code-block-hljs-type-color: null;
+    --kbq-code-block-hljs-variable-background: null;
+    --kbq-code-block-hljs-variable-color: null;
+    --kbq-code-block-hljs-variable-constant-background: null;
+    --kbq-code-block-hljs-variable-constant-color: null;
+    --kbq-code-block-hljs-variable-language-background: null;
+    --kbq-code-block-hljs-variable-language-color: null;
+}
+
+:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    --kbq-states-focused-color: hsla(216, 100%, 50%, 100%);
+    --kbq-states-focused-color-error: hsla(7, 97%, 50%, 100%);
+    --kbq-code-block-filled-container-background: hsla(229, 15%, 16%, 100%);
+    --kbq-code-block-filled-container-border-color: hsla(229, 15%, 22%, 100%);
+    --kbq-code-block-filled-header-background: hsla(229, 15%, 16%, 100%);
+    --kbq-code-block-filled-header-shadow: 0px 1px 0px 0px hsla(229, 100%, 85%, 15%);
+    --kbq-code-block-filled-actionbar-fade-gradient: linear-gradient(90deg, transparent, hsla(229, 15%, 16%, 100%));
+    --kbq-code-block-filled-actionbar-background: hsla(229, 15%, 16%, 100%);
+    --kbq-code-block-filled-collapse-expanded-background: transparent;
+    --kbq-code-block-filled-collapse-collapsed-background: linear-gradient(
+        180deg,
+        hsla(229, 15%, 15%, 0%) 0%,
+        hsla(229, 15%, 15%, 1%) 100%
+    );
+    --kbq-code-block-filled-collapse-button-expand-background: hsla(229, 15%, 16%, 100%);
+    --kbq-code-block-outline-container-background: hsla(229, 15%, 15%, 100%);
+    --kbq-code-block-outline-container-border-color: transparent;
+    --kbq-code-block-outline-header-background: hsla(229, 15%, 15%, 100%);
+    --kbq-code-block-outline-header-shadow: 0px 1px 0px 0px hsla(229, 100%, 85%, 15%);
+    --kbq-code-block-outline-actionbar-fade-gradient: linear-gradient(90deg, transparent, hsla(229, 15%, 15%, 100%));
+    --kbq-code-block-outline-actionbar-background: hsla(229, 15%, 15%, 100%);
+    --kbq-code-block-outline-collapse-expanded-background: transparent;
+    --kbq-code-block-outline-collapse-collapsed-background: linear-gradient(
+        180deg,
+        hsla(229, 15%, 12%, 0%) 0%,
+        hsla(229, 15%, 12%, 1%) 100%
+    );
+    --kbq-code-block-outline-collapse-button-expand-background: hsla(229, 15%, 15%, 100%);
+    --kbq-code-block-hljs-addition-background: hsla(104, 64%, 95%, 100%);
+    --kbq-code-block-hljs-addition-color: hsla(104, 64%, 25%, 100%);
+    --kbq-code-block-hljs-attr-background: null;
+    --kbq-code-block-hljs-attr-color: null;
+    --kbq-code-block-hljs-attribute-background: null;
+    --kbq-code-block-hljs-attribute-color: null;
+    --kbq-code-block-hljs-built-in-background: null;
+    --kbq-code-block-hljs-built-in-color: null;
+    --kbq-code-block-hljs-bullet-background: null;
+    --kbq-code-block-hljs-bullet-color: null;
+    --kbq-code-block-hljs-char-escape-background: null;
+    --kbq-code-block-hljs-char-escape-color: null;
+    --kbq-code-block-hljs-class-background: null;
+    --kbq-code-block-hljs-class-color: null;
+    --kbq-code-block-hljs-code-background: null;
+    --kbq-code-block-hljs-code-color: null;
+    --kbq-code-block-hljs-comment-background: null;
+    --kbq-code-block-hljs-comment-color: hsla(229, 15%, 60%, 100%);
+    --kbq-code-block-hljs-deletion-background: hsla(7, 97%, 95%, 100%);
+    --kbq-code-block-hljs-deletion-color: hsla(7, 97%, 35%, 100%);
+    --kbq-code-block-hljs-doctag-background: null;
+    --kbq-code-block-hljs-doctag-color: null;
+    --kbq-code-block-hljs-emphasis-background: null;
+    --kbq-code-block-hljs-emphasis-color: null;
+    --kbq-code-block-hljs-formula-background: null;
+    --kbq-code-block-hljs-formula-color: null;
+    --kbq-code-block-hljs-function-background: null;
+    --kbq-code-block-hljs-function-color: null;
+    --kbq-code-block-hljs-keyword-background: null;
+    --kbq-code-block-hljs-keyword-color: null;
+    --kbq-code-block-hljs-line-numbers-color: hsla(229, 15%, 60%, 100%);
+    --kbq-code-block-hljs-link-background: null;
+    --kbq-code-block-hljs-link-color: null;
+    --kbq-code-block-hljs-literal-background: null;
+    --kbq-code-block-hljs-literal-color: hsla(277, 72%, 60%, 100%);
+    --kbq-code-block-hljs-meta-background: null;
+    --kbq-code-block-hljs-meta-color: hsla(216, 100%, 65%, 100%);
+    --kbq-code-block-hljs-meta-keyword-background: null;
+    --kbq-code-block-hljs-meta-keyword-color: null;
+    --kbq-code-block-hljs-meta-string-background: null;
+    --kbq-code-block-hljs-meta-string-color: hsla(216, 100%, 65%, 100%);
+    --kbq-code-block-hljs-meta-prompt-background: null;
+    --kbq-code-block-hljs-meta-prompt-color: null;
+    --kbq-code-block-hljs-name-background: null;
+    --kbq-code-block-hljs-name-color: hsla(216, 100%, 65%, 100%);
+    --kbq-code-block-hljs-number-background: null;
+    --kbq-code-block-hljs-number-color: hsla(277, 72%, 60%, 100%);
+    --kbq-code-block-hljs-operator-background: null;
+    --kbq-code-block-hljs-operator-color: null;
+    --kbq-code-block-hljs-params-background: null;
+    --kbq-code-block-hljs-params-color: null;
+    --kbq-code-block-hljs-property-background: null;
+    --kbq-code-block-hljs-property-color: null;
+    --kbq-code-block-hljs-punctuation-background: null;
+    --kbq-code-block-hljs-punctuation-color: null;
+    --kbq-code-block-hljs-quote-background: null;
+    --kbq-code-block-hljs-quote-color: null;
+    --kbq-code-block-hljs-regexp-background: null;
+    --kbq-code-block-hljs-regexp-color: hsla(104, 64%, 40%, 100%);
+    --kbq-code-block-hljs-section-background: null;
+    --kbq-code-block-hljs-section-color: null;
+    --kbq-code-block-hljs-selector-attr-background: null;
+    --kbq-code-block-hljs-selector-attr-color: null;
+    --kbq-code-block-hljs-selector-class-background: null;
+    --kbq-code-block-hljs-selector-class-color: null;
+    --kbq-code-block-hljs-selector-id-background: null;
+    --kbq-code-block-hljs-selector-id-color: null;
+    --kbq-code-block-hljs-selector-pseudo-background: null;
+    --kbq-code-block-hljs-selector-pseudo-color: null;
+    --kbq-code-block-hljs-selector-tag-background: null;
+    --kbq-code-block-hljs-selector-tag-color: hsla(216, 100%, 65%, 100%);
+    --kbq-code-block-hljs-string-background: null;
+    --kbq-code-block-hljs-string-color: hsla(104, 64%, 40%, 100%);
+    --kbq-code-block-hljs-strong-background: null;
+    --kbq-code-block-hljs-strong-color: null;
+    --kbq-code-block-hljs-subst-background: null;
+    --kbq-code-block-hljs-subst-color: null;
+    --kbq-code-block-hljs-symbol-background: null;
+    --kbq-code-block-hljs-symbol-color: hsla(216, 100%, 65%, 100%);
+    --kbq-code-block-hljs-tag-background: null;
+    --kbq-code-block-hljs-tag-color: null;
+    --kbq-code-block-hljs-template-tag-background: null;
+    --kbq-code-block-hljs-template-tag-color: null;
+    --kbq-code-block-hljs-template-variable-background: null;
+    --kbq-code-block-hljs-template-variable-color: null;
+    --kbq-code-block-hljs-title-background: null;
+    --kbq-code-block-hljs-title-color: hsla(216, 100%, 65%, 100%);
+    --kbq-code-block-hljs-title-class-background: null;
+    --kbq-code-block-hljs-title-class-color: null;
+    --kbq-code-block-hljs-title-class-inherited-background: null;
+    --kbq-code-block-hljs-title-class-inherited-color: null;
+    --kbq-code-block-hljs-title-function-background: null;
+    --kbq-code-block-hljs-title-function-color: null;
+    --kbq-code-block-hljs-title-function-invoke-background: null;
+    --kbq-code-block-hljs-title-function-invoke-color: null;
+    --kbq-code-block-hljs-type-background: null;
+    --kbq-code-block-hljs-type-color: null;
+    --kbq-code-block-hljs-variable-background: null;
+    --kbq-code-block-hljs-variable-color: null;
+    --kbq-code-block-hljs-variable-constant-background: null;
+    --kbq-code-block-hljs-variable-constant-color: null;
+    --kbq-code-block-hljs-variable-language-background: null;
+    --kbq-code-block-hljs-variable-language-color: null;
+}

package/code-block/code-block.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();

package/core/highlight/_highlight-theme.scss

@@ -1,4 +1,4 @@
-@mixin kbq-highlight-theme($theme) {
+@mixin kbq-highlight-theme() {
     .kbq-highlight {
         color: inherit;
 

package/core/pop-up/pop-up-styles.d.ts

@@ -1,2 +1,2 @@
-import { ElementRef } from '@angular/core';
-export declare const applyPopupMargins: (element: ElementRef, name: string, value: string) => void;
+import { Renderer2 } from '@angular/core';
+export declare const applyPopupMargins: (renderer: Renderer2, element: HTMLElement, name: string, value: string) => void;

package/core/pop-up/pop-up-trigger.d.ts

@@ -1,18 +1,18 @@
 import { Directionality } from '@angular/cdk/bidi';
-import { ConnectedOverlayPositionChange, ConnectionPositionPair, Overlay, OverlayConfig, OverlayRef, ScrollDispatcher } from '@angular/cdk/overlay';
+import { ConnectedOverlayPositionChange, ConnectionPositionPair, Overlay, OverlayConfig, OverlayRef, ScrollDispatcher, ScrollStrategy } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
 import { ElementRef, EventEmitter, NgZone, OnDestroy, OnInit, TemplateRef, Type, ViewContainerRef } from '@angular/core';
 import { Observable, Subject, Subscription } from 'rxjs';
 import { PopUpPlacements } from './constants';
 import * as i0 from "@angular/core";
 export declare abstract class KbqPopUpTrigger<T> implements OnInit, OnDestroy {
-    protected overlay: Overlay;
-    protected elementRef: ElementRef;
-    protected ngZone: NgZone;
-    protected scrollDispatcher: ScrollDispatcher;
-    protected hostView: ViewContainerRef;
-    protected scrollStrategy: any;
-    protected direction?: Directionality | undefined;
+    protected readonly overlay: Overlay;
+    protected readonly elementRef: ElementRef;
+    protected readonly ngZone: NgZone;
+    protected readonly scrollDispatcher: ScrollDispatcher;
+    protected readonly hostView: ViewContainerRef;
+    protected readonly direction: Directionality | null;
+    protected abstract scrollStrategy: () => ScrollStrategy;
     isOpen: boolean;
     enterDelay: number;
     leaveDelay: number;
@@ -40,7 +40,6 @@ export declare abstract class KbqPopUpTrigger<T> implements OnInit, OnDestroy {
     };
     protected readonly destroyed: Subject<void>;
     protected triggerName: string;
-    protected constructor(overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, direction?: Directionality | undefined);
     abstract updateClassMap(newPlacement?: string): void;
     abstract updateData(): void;
     abstract closingActions(): Observable<any>;

package/core/pop-up/pop-up.d.ts

@@ -1,10 +1,11 @@
 import { AnimationEvent } from '@angular/animations';
-import { ChangeDetectorRef, EventEmitter, OnDestroy, TemplateRef } from '@angular/core';
+import { ChangeDetectorRef, EventEmitter, OnDestroy, Renderer2, TemplateRef } from '@angular/core';
 import { Observable, Subject } from 'rxjs';
 import { PopUpVisibility } from './constants';
 import * as i0 from "@angular/core";
 export declare abstract class KbqPopUp implements OnDestroy {
-    private changeDetectorRef;
+    protected readonly renderer: Renderer2;
+    protected readonly changeDetectorRef: ChangeDetectorRef;
     header: string | TemplateRef<any>;
     content: string | TemplateRef<any>;
     context: {
@@ -22,7 +23,6 @@ export declare abstract class KbqPopUp implements OnDestroy {
     protected closeOnInteraction: boolean;
     private showTimeoutId;
     private hideTimeoutId;
-    protected constructor(changeDetectorRef: ChangeDetectorRef);
     ngOnDestroy(): void;
     isTemplateRef(value: any): boolean;
     show(delay: number): void;

package/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss

@@ -2,43 +2,40 @@
 
 @use '../../styles/common/tokens' as *;
 
-@mixin kbq-pseudo-checkbox-color($component, $style-name) {
-    $style: map.get($component, $style-name);
+@mixin kbq-pseudo-checkbox-color($style-name) {
     $base: checkbox-#{$style-name};
 
-    border-color: kbq-css-variable(#{$base}-default-border, map.get($style, default, border));
-    background: kbq-css-variable(#{$base}-default-background, map.get($style, default, background));
+    border-color: kbq-css-variable(#{$base}-default-border);
+    background: kbq-css-variable(#{$base}-default-background);
 
     & .kbq-checkbox-checkmark,
     & .kbq-checkbox-mixedmark {
-        color: kbq-css-variable(#{$base}-default-color, map.get($style, default, color));
+        color: kbq-css-variable(#{$base}-default-color);
     }
 
     &.kbq-checked,
     &.kbq-indeterminate {
-        border-color: kbq-css-variable(#{$base}-states-checked-border, map.get($style, checked, border));
-        background: kbq-css-variable(#{$base}-states-checked-background, map.get($style, checked, background));
+        border-color: kbq-css-variable(#{$base}-states-checked-border);
+        background: kbq-css-variable(#{$base}-states-checked-background);
     }
 
     &.kbq-disabled {
         & .kbq-checkbox-checkmark,
         & .kbq-checkbox-mixedmark {
-            color: kbq-css-variable(#{$base}-states-disabled-color, map.get($style, disabled, color));
+            color: kbq-css-variable(#{$base}-states-disabled-color);
         }
 
-        border-color: kbq-css-variable(#{$base}-states-disabled-border, map.get($style, disabled, border));
-        background: kbq-css-variable(#{$base}-states-disabled-background, map.get($style, disabled, background));
+        border-color: kbq-css-variable(#{$base}-states-disabled-border);
+        background: kbq-css-variable(#{$base}-states-disabled-background);
     }
 }
 
-@mixin kbq-pseudo-checkbox-theme($theme) {
-    $checkbox: map.get($theme, components, checkbox);
-
+@mixin kbq-pseudo-checkbox-theme() {
     .kbq-pseudo-checkbox {
-        @include kbq-pseudo-checkbox-color($checkbox, theme);
+        @include kbq-pseudo-checkbox-color(theme);
 
         &.kbq-error {
-            @include kbq-pseudo-checkbox-color($checkbox, error);
+            @include kbq-pseudo-checkbox-color(error);
         }
     }
 }