Skip to content

Commit fbb9756

Browse files
NikGurevpimenovoleg
NikGurev
and
pimenovoleg
authored
feat(visual,docs): moved from sass vars to css-vars (#296)
Co-authored-by: Oleg Pimenov <pimenov.o@gmail.com>
1 parent 0bff8d0 commit fbb9756

File tree

94 files changed

+4073
-10693
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

94 files changed

+4073
-10693
lines changed

‎angular.json

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,11 @@
7171
"styles": [
7272
{
7373
"input": "apps/docs/src/main.scss"
74-
}
74+
},
75+
"apps/docs/src/styles/koobiq/default-theme/css-tokens.css",
76+
"apps/docs/src/styles/koobiq/default-theme/css-tokens-dark.css",
77+
"apps/docs/src/styles/koobiq/default-theme/css-tokens-light.css"
78+
7579
],
7680
"scripts": [],
7781
"vendorChunk": true,

‎apps/docs/scripts/build-tokens.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,8 @@ function buildTokens(themeConfig) {
4444
delete extendedPlatform.platforms.figma;
4545

4646
extendedPlatform.platforms.css.files[0].options.selector = `.${platform.skin}`;
47+
extendedPlatform.platforms.css.files[1].options.selector = `.kbq-theme-light`;
48+
extendedPlatform.platforms.css.files[2].options.selector = `.kbq-theme-dark`;
4749

4850
const StyleDictionaryExtended = StyleDictionary.extend(extendedPlatform);
4951
delete StyleDictionaryExtended.platforms.figma;
@@ -64,16 +66,14 @@ const themeColorNames = ['default-theme'];
6466

6567
for (const skin of [kbq]) {
6668
const koobiqTokensProps = `node_modules/@koobiq/design-tokens/web/properties/**/*.json5`;
67-
const koobiqTokensComponents = `node_modules/@koobiq/design-tokens/web/components/**/*.json5`;
6869

6970
for (const theme of themeColorNames) {
7071
themesConfig.push({
7172
skin,
7273
name: theme,
7374
buildPath: [
7475
koobiqTokensProps,
75-
`apps/docs/src/styles/${skin}/${theme}/properties/**/*.json5`,
76-
koobiqTokensComponents
76+
`apps/docs/src/styles/${skin}/${theme}/properties/**/*.json5`
7777
],
7878
outputPath: `apps/docs/src/styles/${skin}/${theme}/`
7979
});

‎apps/docs/src/app/components/anchors/_anchors-theme.scss

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,13 @@
44
@use '../dist/components/core/styles/typography';
55
@use '../dist/components/core/styles/common';
66

7-
@mixin kbq-docs-anchors-theme($theme) {
8-
$foreground: map.get($theme, foreground);
9-
$background: map.get($theme, background);
7+
/* stylelint-disable no-unknown-custom-properties */
108

11-
$shadow: theming.kbq-color($foreground, text-less-contrast);
9+
@mixin kbq-docs-anchors-theme() {
10+
$shadow: var(--kbq-foreground-text-less-contrast);
1211

1312
.docs-anchors {
14-
background-color: theming.kbq-color($background, bg);
13+
background-color: var(--kbq-background-bg);
1514
}
1615

1716
.docs-anchors__link {

‎apps/docs/src/app/components/component-viewer/_component-viewer-theme.scss

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
11
@use 'sass:map';
22

33
@use '../dist/components/core/styles/theming';
4-
@use '../dist/components/core/styles/typography';
4+
@use '../dist/components/core/styles/common/tokens';
55

6-
@mixin kbq-docs-component-viewer-theme($theme) {
7-
$background: map.get($theme, background);
6+
/* stylelint-disable no-unknown-custom-properties */
87

8+
@mixin kbq-docs-component-viewer-theme() {
99
.docs-component-header {
10-
background: map.get($background, bg);
10+
background: var(--kbq-background-bg);
1111
}
1212

1313
.docs-api__section {
14-
border-color: map.get($background, contrast-fade);
14+
border-color: var(--kbq-background-contrast-fade);
1515
}
1616

1717
.docs-api__section_directive .docs-api_method-name {
18-
color: map.get(map.get($theme, line), warning) !important;
18+
color: var(--kbq-line-warning) !important;
1919
}
2020

2121
.docs-api__input-marker {
22-
color: map.get(map.get($theme, line), success) !important;
22+
color: var(--kbq-line-success) !important;
2323
}
2424

2525
.kbq-docs-table {
@@ -33,7 +33,7 @@
3333
}
3434
}
3535

36-
@mixin kbq-docs-component-viewer-typography($config) {
36+
@mixin kbq-docs-component-viewer-typography() {
3737
// header
3838
.docs-component-name {
3939
font-family: Inter;
@@ -102,22 +102,22 @@
102102
}
103103

104104
.docs-component-navbar .kbq-tab-link {
105-
@include typography.kbq-typography-level-to-styles($config, text-big);
105+
@include tokens.kbq-typography-level-to-styles_css-variables(typography, text-big);
106106
}
107107

108108
.docs-api__class-selector-name,
109109
.docs-api__input-marker,
110110
.docs-api_property-name {
111-
@include typography.kbq-typography-level-to-styles($config, mono-big);
111+
@include tokens.kbq-typography-level-to-styles_css-variables(typography, mono-big);
112112
}
113113

114114
.docs-api_method-name {
115-
@include typography.kbq-typography-level-to-styles($config, mono-big-strong);
115+
@include tokens.kbq-typography-level-to-styles_css-variables(typography, mono-big-strong);
116116
}
117117

118118
.docs-api {
119119
.kbq-markdown__code {
120-
@include typography.kbq-typography-level-to-styles($config, mono-big);
120+
@include tokens.kbq-typography-level-to-styles_css-variables(typography, mono-big);
121121
}
122122
}
123123
}

‎apps/docs/src/app/components/docs-example-source/_docs-example-source-theme.scss

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,25 @@
11
@use 'sass:map';
22

33
@use '../dist/components/core/styles/theming';
4-
@use '../dist/components/core/styles/typography';
4+
@use '../dist/components/core/styles/common/tokens';
55

6-
@mixin kbq-docs-example-source-theme($theme) {
7-
$foreground: map.get($theme, foreground);
8-
$background: map.get($theme, background);
6+
/* stylelint-disable no-unknown-custom-properties */
97

8+
@mixin kbq-docs-example-source-theme() {
109
.docs-example-source__code {
11-
background: theming.kbq-color($background, background-less-contrast);
10+
background: var(--kbq-background-background-less-contrast);
1211
}
1312

1413
.docs-example-source__numbers {
15-
background: theming.kbq-color($background, background-less-contrast);
16-
color: theming.kbq-color($foreground, text-disabled);
14+
background: var(--kbq-background-background-less-contrast);
15+
color: var(--kbq-foreground-text-disabled);
1716
}
1817
}
1918

20-
@mixin kbq-docs-example-source-typography($config) {
19+
@mixin kbq-docs-example-source-typography() {
2120
.docs-example-source__code,
2221
.docs-example-source__numbers {
23-
@include typography.kbq-typography-level-to-styles($config, body-mono);
22+
@include tokens.kbq-typography-level-to-styles_css-variables(typography, body-mono);
2423

2524
font-size: 14px;
2625
}

‎apps/docs/src/app/components/docs-live-example-viewer/_docs-live-example-viewer-theme.scss

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
@use 'sass:map';
22

3-
@use '../dist/components/core/styles/typography';
3+
@use '../dist/components/core/styles/common/tokens';
44

5-
@mixin kbq-docs-live-example-viewer-theme($theme) {
6-
$background: map.get($theme, background);
5+
/* stylelint-disable no-unknown-custom-properties */
76

7+
@mixin kbq-docs-live-example-viewer-theme() {
88
.docs-live-example__container {
9-
border: 1px solid map.get($background, contrast-fade);
9+
border: 1px solid var(--kbq-background-contrast-fade);
1010
}
1111

1212
.docs-live-example__footer {
13-
border-top: 1px solid map.get($background, contrast-fade);
13+
border-top: 1px solid var(--kbq-background-contrast-fade);
1414
}
1515
}
1616

17-
@mixin kbq-docs-live-example-viewer-typography($config) {
17+
@mixin kbq-docs-live-example-viewer-typography() {
1818
.docs-live-example__footer,
1919
.docs-live-example__footer .kbq-link {
20-
@include typography.kbq-typography-level-to-styles($config, text-big);
20+
@include tokens.kbq-typography-level-to-styles_css-variables(typography, text-big);
2121
}
2222
}

‎apps/docs/src/app/components/documentation-items.ts

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -85,15 +85,6 @@ const DOCS: { [key: string]: DocCategory[] } = {
8585
hasExamples: false,
8686
examples: []
8787
},
88-
{
89-
id: 'customization',
90-
name: 'Кастомизация тем',
91-
svgPreview: 'themes',
92-
isGuide: true,
93-
hasApi: false,
94-
hasExamples: false,
95-
examples: []
96-
},
9788
{
9889
id: 'typography',
9990
name: 'Типографика',

‎apps/docs/src/app/components/footer/_footer-theme.scss

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,32 @@
11
@use 'sass:map';
22

3-
@use '../dist/components/core/styles/typography';
3+
@use '../dist/components/core/styles/common/tokens';
44

5-
@mixin kbq-docs-footer-theme($theme) {
6-
$foreground: map.get($theme, foreground);
5+
/* stylelint-disable no-unknown-custom-properties */
76

7+
@mixin kbq-docs-footer-theme() {
88
.docs-footer__label,
99
.kbq-dropdown__group-header .kbq-caps-compact-strong {
10-
color: map.get($foreground, contrast-secondary);
10+
color: var(--kbq-foreground-contrast-secondary);
1111
}
1212
}
1313

14-
@mixin kbq-docs-footer-typography($config) {
14+
@mixin kbq-docs-footer-typography() {
1515
.docs-footer__label {
16-
@include typography.kbq-typography-level-to-styles($config, text-normal);
16+
@include tokens.kbq-typography-level-to-styles_css-variables(typography, text-normal);
1717
}
1818

1919
.docs-footer__control {
20-
@include typography.kbq-typography-level-to-styles($config, text-big);
20+
@include tokens.kbq-typography-level-to-styles_css-variables(typography, text-big);
2121
}
2222

2323
.docs-dropdown {
2424
.kbq-dropdown-item__text {
25-
@include typography.kbq-typography-level-to-styles($config, text-big);
25+
@include tokens.kbq-typography-level-to-styles_css-variables(typography, text-big);
2626
}
2727

2828
.kbq-dropdown-item__caption {
29-
@include typography.kbq-typography-level-to-styles($config, text-normal);
29+
@include tokens.kbq-typography-level-to-styles_css-variables(typography, text-normal);
3030
}
3131
}
3232
}

‎apps/docs/src/app/components/navbar/_navbar-theme.scss

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,22 @@
11
@use 'sass:map';
22

33
@use '../dist/components/core/styles/theming';
4-
@use '../dist/components/core/styles/typography';
4+
@use '../dist/components/core/styles/common/tokens';
55

6-
@mixin kbq-docs-navbar-theme($theme) {
7-
$background: map.get($theme, background);
8-
$foreground: map.get($theme, foreground);
6+
/* stylelint-disable no-unknown-custom-properties */
97

8+
@mixin kbq-docs-navbar-theme() {
109
.docs-navbar {
11-
background: map.get($background, bg);
10+
background: var(--kbq-background-bg);
1211

1312
.docs-navbar__github-icon svg {
14-
fill: map.get($foreground, contrast);
13+
fill: var(--kbq-foreground-contrast);
1514
}
1615
}
1716
}
1817

19-
@mixin kbq-docs-navbar-typography($config) {
18+
@mixin kbq-docs-navbar-typography() {
2019
.docs-sidenav {
21-
@include typography.kbq-typography-level-to-styles($config, subheading);
20+
@include tokens.kbq-typography-level-to-styles_css-variables(typography, subheading);
2221
}
2322
}

‎apps/docs/src/app/components/page-not-found/_page-not-found-theme.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
@use 'sass:map';
22

3-
@mixin kbq-docs-page-not-found-theme($theme) {
4-
$background: map.get($theme, background);
3+
/* stylelint-disable no-unknown-custom-properties */
54

5+
@mixin kbq-docs-page-not-found-theme() {
66
.page-not-found {
7-
background: map.get($background, bg);
7+
background: var(--kbq-background-bg);
88
}
99
}

‎apps/docs/src/app/components/sidenav/_sidenav-theme.scss

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,49 @@
11
@use 'sass:map';
22

33
@use '../dist/components/core/styles/theming';
4-
@use '../dist/components/core/styles/typography';
4+
@use '../dist/components/core/styles/common/tokens';
55

6-
@mixin kbq-docs-sidenav-theme($theme) {
7-
$background: map.get($theme, background);
8-
$foreground: map.get($theme, foreground);
9-
$states-background: map.get(map.get($theme, states), background);
6+
/* stylelint-disable no-unknown-custom-properties */
107

8+
@mixin kbq-docs-sidenav-theme() {
119
.docs-sidenav {
12-
background-color: map.get($background, bg-secondary);
10+
background-color: var(--kbq-background-bg-secondary);
1311

1412
.docs-sidenav__header-text path {
15-
fill: map.get($foreground, contrast);
13+
fill: var(--kbq-foreground-contrast);
1614
}
1715

1816
.kbq-tree-option:hover {
19-
background: map.get($states-background, transparent-hover);
17+
background: var(--kbq-states-background-transparent-hover);
2018
}
2119

2220
.kbq-tree-option.kbq-selected,
2321
.kbq-tree-option.kbq-selected:hover {
24-
background: map.get($states-background, transparent-active);
22+
background: var(--kbq-states-background-transparent-active);
2523
}
2624
}
2725

2826
@media (width <= 768px) {
2927
.docs-sidenav {
30-
background-color: map.get($background, bg);
28+
background-color: var(--kbq-background-bg);
3129
}
3230
}
3331
}
3432

35-
@mixin kbq-docs-sidenav-typography($config) {
33+
@mixin kbq-docs-sidenav-typography() {
3634
.docs-sidenav {
3735
.docs-sidenav__category-text {
38-
@include typography.kbq-typography-level-to-styles($config, subheading);
36+
@include tokens.kbq-typography-level-to-styles_css-variables(typography, subheading);
3937
}
4038
}
4139

4240
.docs-navbar__anchor .kbq-button {
43-
@include typography.kbq-typography-level-to-styles($config, text-big);
41+
@include tokens.kbq-typography-level-to-styles_css-variables(typography, text-big);
4442
}
4543

4644
@media (width <= 768px) {
4745
.docs-sidenav__category {
48-
@include typography.kbq-typography-level-to-styles($config, title);
46+
@include tokens.kbq-typography-level-to-styles_css-variables(typography, title);
4947
}
5048
}
5149
}

0 commit comments

Comments
 (0)