Skip to content

Commit 3db5611

Browse files
NikGurevNikGurev
authored
feat(docs,chore): added theme-less tokens,updated lines/contrast-fade (#DS-2803) (#261)
1 parent 91100a5 commit 3db5611

File tree

9 files changed

+161
-129
lines changed

9 files changed

+161
-129
lines changed

‎apps/docs/src/assets/stackblitz/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
"@koobiq/moment-date-adapter": "^3.1.2",
2828
"@koobiq/luxon-date-adapter": "^3.1.2",
2929
"@koobiq/date-formatter": "^3.1.2",
30-
"@koobiq/design-tokens": "^3.4.0",
30+
"@koobiq/design-tokens": "^3.5.0",
3131
"marked": "^9.0.0",
3232
"@messageformat/core": "^3.0.0",
3333
"moment": "~2.29.2",

‎apps/docs/src/styles/koobiq/default-theme/_variables.scss

Lines changed: 46 additions & 38 deletions
Large diffs are not rendered by default.

‎apps/docs/src/styles/koobiq/default-theme/css-tokens-dark.css

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
--kbq-info-default: hsla(180, 55%, 50%, 100%);
1919
--kbq-background-theme: hsla(216, 100%, 50%, 100%);
2020
--kbq-background-theme-fade: hsla(216, 100%, 20%, 100%);
21+
--kbq-background-theme-less: hsla(216, 100%, 18%, 100%);
2122
--kbq-background-bg: hsla(229, 15%, 12%, 100%);
2223
--kbq-background-bg-secondary: hsla(229, 15%, 16%, 100%);
2324
--kbq-background-bg-tertiary: hsla(229, 15%, 14%, 100%);
@@ -80,6 +81,7 @@
8081
--kbq-icon-visited: hsla(277, 72%, 50%, 100%);
8182
--kbq-line-theme: hsla(216, 100%, 65%, 100%);
8283
--kbq-line-theme-fade: hsla(216, 100%, 30%, 100%);
84+
--kbq-line-theme-less: hsla(216, 100%, 27%, 100%);
8385
--kbq-line-contrast: hsla(229, 15%, 100%, 100%);
8486
--kbq-line-contrast-fade: hsla(229, 15%, 30%, 100%);
8587
--kbq-line-contrast-less: hsla(229, 15%, 22%, 100%);
@@ -97,6 +99,8 @@
9799
--kbq-states-background-theme-active: hsla(216, 100%, 39%, 100%);
98100
--kbq-states-background-theme-fade-hover: hsla(216, 100%, 18%, 100%);
99101
--kbq-states-background-theme-fade-active: hsla(216, 100%, 21%, 100%);
102+
--kbq-states-background-theme-less-hover: hsla(216, 100%, 15%, 100%);
103+
--kbq-states-background-theme-less-active: hsla(216, 100%, 18%, 100%);
100104
--kbq-states-background-contrast-hover: hsla(229, 15%, 80%, 100%);
101105
--kbq-states-background-contrast-active: hsla(229, 15%, 55%, 100%);
102106
--kbq-states-background-contrast-fade-hover: hsla(229, 15%, 25%, 100%);
@@ -719,17 +723,17 @@
719723
--kbq-icon-success-color: hsla(104, 64%, 45%, 100%);
720724
--kbq-icon-warning-color: hsla(38, 100%, 60%, 100%);
721725
--kbq-link-text: hsla(216, 100%, 65%, 100%);
722-
--kbq-link-border-bottom: hsla(216, 100%, 30%, 100%);
726+
--kbq-link-border-bottom: hsla(216, 100%, 27%, 100%);
723727
--kbq-link-state-visited-text: hsla(277, 72%, 50%, 100%);
724728
--kbq-link-state-visited-border-bottom: hsla(277, 72%, 30%, 100%);
725729
--kbq-link-state-visited-hover-text: hsla(277, 72%, 55%, 100%);
726730
--kbq-link-state-visited-hover-border-bottom: hsla(277, 72%, 30%, 100%);
727731
--kbq-link-state-visited-active-text: hsla(277, 72%, 60%, 100%);
728732
--kbq-link-state-visited-active-border-bottom: hsla(277, 72%, 30%, 100%);
729733
--kbq-link-state-hover-text: hsla(216, 100%, 65%, 100%);
730-
--kbq-link-state-hover-border-bottom: hsla(216, 100%, 30%, 100%);
734+
--kbq-link-state-hover-border-bottom: hsla(216, 100%, 27%, 100%);
731735
--kbq-link-state-active-text: hsla(216, 100%, 70%, 100%);
732-
--kbq-link-state-active-border-bottom: hsla(216, 100%, 30%, 100%);
736+
--kbq-link-state-active-border-bottom: hsla(216, 100%, 27%, 100%);
733737
--kbq-link-state-focused-outline: hsla(216, 100%, 60%, 100%);
734738
--kbq-link-state-disabled-text: hsla(229, 15%, 40%, 100%);
735739
--kbq-link-state-disabled-border-bottom: hsla(229, 15%, 50%, 32%);
@@ -742,11 +746,11 @@
742746
--kbq-list-states-hover-text-color: hsla(229, 15%, 80%, 100%);
743747
--kbq-list-states-hover-icon-color: hsla(229, 15%, 80%, 100%);
744748
--kbq-list-states-hover-icon-button-color: hsla(229, 15%, 45%, 100%);
745-
--kbq-list-states-selected-container-background: hsla(216, 100%, 20%, 100%);
749+
--kbq-list-states-selected-container-background: hsla(216, 100%, 18%, 100%);
746750
--kbq-list-states-selected-text-color: hsla(229, 15%, 80%, 100%);
747751
--kbq-list-states-selected-icon-color: hsla(229, 15%, 80%, 100%);
748752
--kbq-list-states-selected-icon-button-color: hsla(229, 15%, 45%, 100%);
749-
--kbq-list-states-selected-hover-container-background: hsla(216, 100%, 18%, 100%);
753+
--kbq-list-states-selected-hover-container-background: hsla(216, 100%, 15%, 100%);
750754
--kbq-list-states-selected-hover-text-color: hsla(229, 15%, 80%, 100%);
751755
--kbq-list-states-selected-hover-icon-color: hsla(229, 15%, 80%, 100%);
752756
--kbq-list-states-selected-hover-icon-button-color: hsla(229, 15%, 45%, 100%);
@@ -778,11 +782,11 @@
778782
--kbq-markdown-code-background: hsla(229, 15%, 95%, 100%);
779783
--kbq-markdown-code-border: hsla(229, 15%, 22%, 100%);
780784
--kbq-markdown-link-text: hsla(216, 100%, 65%, 100%);
781-
--kbq-markdown-link-border-bottom: hsla(216, 100%, 30%, 100%);
785+
--kbq-markdown-link-border-bottom: hsla(216, 100%, 27%, 100%);
782786
--kbq-markdown-link-state-visited-text: hsla(277, 72%, 50%, 100%);
783787
--kbq-markdown-link-state-visited-border-bottom: hsla(277, 72%, 30%, 100%);
784788
--kbq-markdown-link-state-hover-text: hsla(216, 100%, 65%, 100%);
785-
--kbq-markdown-link-state-hover-border-bottom: hsla(216, 100%, 30%, 100%);
789+
--kbq-markdown-link-state-hover-border-bottom: hsla(216, 100%, 27%, 100%);
786790
--kbq-markdown-link-state-active: hsla(216, 100%, 70%, 100%);
787791
--kbq-markdown-link-state-focused-outline: hsla(216, 100%, 60%, 100%);
788792
--kbq-markdown-image-caption-text: hsla(229, 15%, 50%, 100%);
@@ -1149,13 +1153,13 @@
11491153
--kbq-tree-states-hover-action-button-color: hsla(229, 15%, 45%, 100%);
11501154
--kbq-tree-states-hover-caption-color: hsla(229, 15%, 60%, 100%);
11511155
--kbq-tree-states-focused-focus-outline-color: hsla(216, 100%, 60%, 100%);
1152-
--kbq-tree-states-selected-container-background: hsla(216, 100%, 20%, 100%);
1156+
--kbq-tree-states-selected-container-background: hsla(216, 100%, 18%, 100%);
11531157
--kbq-tree-states-selected-text-color: hsla(229, 15%, 80%, 100%);
11541158
--kbq-tree-states-selected-icon-color: hsla(229, 15%, 80%, 100%);
11551159
--kbq-tree-states-selected-tree-toggle-color: hsla(229, 15%, 45%, 100%);
11561160
--kbq-tree-states-selected-action-button-color: hsla(229, 15%, 45%, 100%);
11571161
--kbq-tree-states-selected-caption-color: hsla(229, 15%, 60%, 100%);
1158-
--kbq-tree-states-selected-hover-container-background: hsla(216, 100%, 18%, 100%);
1162+
--kbq-tree-states-selected-hover-container-background: hsla(216, 100%, 15%, 100%);
11591163
--kbq-tree-states-selected-hover-text-color: hsla(229, 15%, 80%, 100%);
11601164
--kbq-tree-states-selected-hover-icon-color: hsla(229, 15%, 80%, 100%);
11611165
--kbq-tree-states-selected-hover-tree-toggle-color: hsla(229, 15%, 45%, 100%);

0 commit comments

Comments
 (0)