@koobiq/components 17.5.0 → 17.6.1

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/services/theme.service.d.ts

@@ -6,6 +6,22 @@ export interface KbqTheme {
     className: string;
     selected: boolean;
 }
+/**
+ * Enum representing the available themes for the Koobiq design system.
+ * This enum is used to manage and switch between different visual themes.
+ */
+export declare enum KbqThemeSelector {
+    /**
+     * Represents the default light theme.
+     * This is the standard theme that is applied
+     * when the application is first loaded if nothing else provided
+     */
+    Default = "kbq-theme-light",
+    /**
+     * This theme is used to provide a darker visual experience, often preferred in low-light environments.
+     */
+    Dark = "kbq-theme-dark"
+}
 export declare const KbqDefaultThemes: KbqTheme[];
 export declare class ThemeService<T extends KbqTheme | null = KbqTheme> implements OnDestroy {
     private rendererFactory;

package/core/styles/_koobiq-theme.scss

@@ -5,17 +5,8 @@
 
 @use 'theming/scrollbar-theme' as *;
 
-@use '../../code-block/code-block-theme' as *;
-@use '../../divider/divider-theme' as *;
-@use '../../empty-state/empty-state-theme' as *;
-@use '../../file-upload/file-upload-theme' as *;
 @use '../../link/link-theme' as *;
-@use '../../list/list-theme' as *;
-@use '../../loader-overlay/loader-overlay-theme' as *;
-@use '../../modal/modal-theme' as *;
 @use '../../markdown/markdown-theme' as *;
-@use '../../navbar/navbar-theme' as *;
-@use '../../popover/popover-theme' as *;
 @use '../../progress-bar/progress-bar-theme' as *;
 @use '../../progress-spinner/progress-spinner-theme' as *;
 @use '../../radio/radio-theme' as *;
@@ -27,41 +18,23 @@
 @use '../../tabs/tabs-theme' as *;
 @use '../../tags/tag-theme' as *;
 @use '../../textarea/textarea-theme' as *;
-@use '../../timezone/timezone-option-theme' as *;
-@use '../../toast/toast-theme' as *;
-@use '../../toggle/toggle-theme' as *;
-@use '../../tooltip/tooltip-theme' as *;
-@use '../../tree-select/tree-select-theme' as *;
-@use '../../tree/tree-theme' as *;
-@use '../../table/table-theme' as *;
 @use '../forms/forms-theme' as *;
 @use '../option/option-theme' as *;
 @use '../option/optgroup-theme' as *;
 @use '../option/option-action-theme' as *;
 @use '../highlight/highlight-theme' as *;
-@use '../../dl/dl-theme' as *;
 
 @mixin koobiq-theme($theme) {
     @include kbq-core-theme($theme);
 
-    @include kbq-code-block-theme($theme);
-    @include kbq-dl-theme($theme);
-    @include kbq-divider-theme($theme);
-    @include kbq-empty-state-theme($theme);
-    @include kbq-file-upload-theme($theme);
     @include kbq-forms-theme($theme);
     @include kbq-highlight-theme();
     // link is a directive, so styles for it should be applied globally
     @include kbq-link-theme();
-    @include kbq-list-theme($theme);
-    @include kbq-loader-overlay-theme($theme);
-    @include kbq-modal-theme($theme);
-    @include kbq-markdown-theme($theme);
-    @include kbq-navbar-theme($theme);
+    @include kbq-markdown-theme();
     @include kbq-option-theme($theme);
     @include kbq-optgroup-theme($theme);
     @include kbq-option-action-theme($theme);
-    @include kbq-popover-theme($theme);
     @include kbq-progress-bar-theme($theme);
     @include kbq-progress-spinner-theme($theme);
     @include kbq-radio-theme($theme);
@@ -73,13 +46,6 @@
     @include kbq-splitter-theme($theme);
     @include kbq-tabs-theme($theme);
     @include kbq-tag-theme($theme);
-    @include kbq-timezone-option-theme($theme);
-    @include kbq-toast-theme($theme);
-    @include kbq-toggle-theme($theme);
-    @include kbq-tooltip-theme($theme);
-    @include kbq-tree-select-theme($theme);
-    @include kbq-tree-theme($theme);
-    @include kbq-table-theme($theme);
 }
 
 @mixin koobiq-typography($tokens, $config: null, $md-config: null) {
@@ -87,25 +53,13 @@
         $config: kbq-typography-config($tokens);
     }
 
-    @if not $md-config {
-        $md-config: kbq-markdown-typography-config($tokens);
-    }
-
     @include kbq-base-typography();
     @include kbq-markdown-base-typography();
+    @include kbq-markdown-typography();
 
-    @include kbq-code-block-typography($config);
-    @include kbq-empty-state-typography($config);
-    @include kbq-dl-typography($config);
-    @include kbq-file-upload-typography($config);
     @include kbq-forms-typography($config);
-    @include kbq-list-typography($config);
-    @include kbq-loader-overlay-typography($config);
-    @include kbq-modal-typography($config);
-    @include kbq-navbar-typography($config);
     @include kbq-option-typography($config);
     @include kbq-optgroup-typography($config);
-    @include kbq-popover-typography($config);
     @include kbq-progress-bar-typography($config);
     @include kbq-progress-spinner-typography($config);
     @include kbq-radio-typography($config);
@@ -114,14 +68,5 @@
     @include kbq-sidepanel-typography($config);
     @include kbq-tabs-typography($config);
     @include kbq-tag-typography($config);
-    @include kbq-textarea-typography($config);
-    @include kbq-timezone-option-typography($config);
-    @include kbq-toast-typography($config);
-    @include kbq-toggle-typography($config);
-    @include kbq-tooltip-typography($config);
-    @include kbq-tree-select-typography($config);
-    @include kbq-tree-typography($config);
-    @include kbq-table-typography($config);
-
-    @include kbq-markdown-typography($md-config);
+    @include kbq-textarea-typography();
 }

package/divider/_divider-theme.scss

@@ -2,10 +2,8 @@
 
 @use '../core/styles/common/tokens' as *;
 
-@mixin kbq-divider-theme($theme) {
-    $divider: map.get(map.get($theme, components), divider);
-
+@mixin kbq-divider-theme() {
     .kbq-divider {
-        background: kbq-css-variable(divider-color, map.get($divider, color));
+        background: kbq-css-variable(divider-color);
     }
 }

package/divider/divider-tokens.scss

@@ -0,0 +1,14 @@
+.kbq-divider {
+    --kbq-divider-size-horizontal-width: 1px;
+    --kbq-divider-size-horizontal-margin-vertical: 4px;
+    --kbq-divider-size-vertical-width: 1px;
+    --kbq-divider-size-vertical-margin-horizontal: 4px;
+}
+
+:where(.kbq-light, .theme-light, .kbq-theme-light) {
+    --kbq-divider-color: hsla(229, 15%, 6%, 12%);
+}
+
+:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    --kbq-divider-color: hsla(229, 15%, 22%, 100%);
+}

package/divider/divider.scss

@@ -3,6 +3,8 @@
 
 @use '../core/styles/common/tokens' as *;
 
+@use './divider-theme' as *;
+
 .kbq-divider {
     display: block;
     margin: 0;
@@ -28,3 +30,5 @@
         }
     }
 }
+
+@include kbq-divider-theme();

package/dl/_dl-theme.scss

@@ -4,19 +4,17 @@
 @use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-@mixin kbq-dl-theme($theme) {
-    $dl: map.get(map.get($theme, components), dl);
-
+@mixin kbq-dl-theme() {
     .kbq-dt {
-        color: kbq-css-variable(description-list-term-color, map.get($dl, dt));
+        color: kbq-css-variable(description-list-term-color);
     }
 
     .kbq-dd {
-        color: kbq-css-variable(description-list-description-color, map.get($dl, dd));
+        color: kbq-css-variable(description-list-description-color);
     }
 }
 
-@mixin kbq-dl-typography($config) {
+@mixin kbq-dl-typography() {
     .kbq-dl {
         & .kbq-dt {
             @include kbq-typography-css-variables(description-list, term);

package/dl/dl-tokens.scss

@@ -0,0 +1,32 @@
+.kbq-dl {
+    --kbq-description-list-size-horizontal-content-gap-horizontal: 16px;
+    --kbq-description-list-size-horizontal-gap-vertical: 16px;
+    --kbq-description-list-size-vertical-content-gap-vertical: 2px;
+    --kbq-description-list-size-vertical-gap-vertical: 12px;
+    --kbq-description-list-font-term-font-size: 14px;
+    --kbq-description-list-font-term-line-height: 20px;
+    --kbq-description-list-font-term-letter-spacing: -0.006em;
+    --kbq-description-list-font-term-font-weight: normal;
+    --kbq-description-list-font-term-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
+        Arial, sans-serif;
+    --kbq-description-list-font-term-text-transform: null;
+    --kbq-description-list-font-term-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+    --kbq-description-list-font-description-font-size: 14px;
+    --kbq-description-list-font-description-line-height: 20px;
+    --kbq-description-list-font-description-letter-spacing: -0.006em;
+    --kbq-description-list-font-description-font-weight: normal;
+    --kbq-description-list-font-description-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+        'Helvetica Neue', Arial, sans-serif;
+    --kbq-description-list-font-description-text-transform: null;
+    --kbq-description-list-font-description-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+}
+
+:where(.kbq-light, .theme-light, .kbq-theme-light) {
+    --kbq-description-list-term-color: hsla(229, 15%, 50%, 100%);
+    --kbq-description-list-description-color: hsla(229, 15%, 15%, 100%);
+}
+
+:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    --kbq-description-list-term-color: hsla(229, 15%, 50%, 100%);
+    --kbq-description-list-description-color: hsla(229, 15%, 80%, 100%);
+}