Skip to content

Commit

Permalink
feat: add dark theme viz tokens
Browse files Browse the repository at this point in the history
  • Loading branch information
@valentin-mladenov @dtsanevmw
valentin-mladenov authored and dtsanevmw committed Jun 6, 2024
1 parent 22dfd43 commit a855a0b
Show file tree
Hide file tree
Showing 2 changed files with 110 additions and 21 deletions.
42 changes: 21 additions & 21 deletions projects/core/build/tokens.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -715,52 +715,52 @@ const aliases = {
border: token(color.coolGray[50]),
general: {
1: {
blue: token(color.blue[600])
blue: token(color.blue[600]),
},
2: {
violet: token(color.violet[600])
violet: token(color.violet[600]),
},
3: {
aqua: token(color.aqua[800])
aqua: token(color.aqua[800]),
},
4: {
lime: token(color.lime[700])
lime: token(color.lime[700]),
},
5: {
blue: token(color.blue[800])
blue: token(color.blue[800]),
},
6: {
aqua: token(color.aqua[1000])
aqua: token(color.aqua[1000]),
},
7: {
violet: token(color.violet[800])
violet: token(color.violet[800]),
},
8: {
lime: token(color.lime[900])
lime: token(color.lime[900]),
},
9: {
blue: token(color.blue[700])
blue: token(color.blue[700]),
},
10: {
lime: token(color.lime[1000])
lime: token(color.lime[1000]),
},
11: {
aqua: token(color.aqua[600])
aqua: token(color.aqua[600]),
},
12: {
violet: token(color.violet[1000])
violet: token(color.violet[1000]),
},
13: {
violet: token(color.violet[700])
violet: token(color.violet[700]),
},
14: {
blue: token(color.blue[1000])
blue: token(color.blue[1000]),
},
15: {
aqua: token(color.aqua[700])
aqua: token(color.aqua[700]),
},
16: {
lime: token(color.lime[800])
lime: token(color.lime[800]),
},
},
severity: {
Expand Down Expand Up @@ -851,7 +851,7 @@ const aliases = {
},
},
diverging: {
"violet-aqua": {
'violet-aqua': {
v: {
700: token(color.violet[700]),
600: token(color.violet[600]),
Expand All @@ -870,7 +870,7 @@ const aliases = {
900: token(color.aqua[900]),
},
},
"blue-jade": {
'blue-jade': {
b: {
800: token(color.blue[800]),
700: token(color.blue[700]),
Expand All @@ -889,7 +889,7 @@ const aliases = {
800: token(color.jade[800]),
},
},
"blue-green": {
'blue-green': {
b: {
800: token(color.blue[800]),
700: token(color.blue[700]),
Expand All @@ -908,7 +908,7 @@ const aliases = {
800: token(color.green[800]),
},
},
"green-yellow-red": {
'green-yellow-red': {
g: {
700: token(color.green[700]),
600: token(color.green[600]),
Expand All @@ -927,7 +927,7 @@ const aliases = {
900: token(color.red[900]),
},
},
}
},
},
typography: generateTypographyTokens(), // Typography will move from -global to -alias in the future.
};
Expand Down
89 changes: 89 additions & 0 deletions projects/core/src/styles/theme.dark.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,4 +144,93 @@
--cds-alias-utility-violet: #{$cds-global-color-violet-400};
--cds-alias-utility-violet-tint: #{$cds-global-color-violet-1000};
--cds-alias-utility-violet-shade: #{$cds-global-color-violet-200};

--cds-alias-viz-border: var(--cds-global-color-cool-gray-50);
--cds-alias-viz-general-1-blue: var(--cds-global-color-blue-400);
--cds-alias-viz-general-2-violet: var(--cds-global-color-violet-400);
--cds-alias-viz-general-3-aqua: var(--cds-global-color-aqua-200);
--cds-alias-viz-general-4-lime: var(--cds-global-color-lime-300);
--cds-alias-viz-general-5-blue: var(--cds-global-color-blue-200);
--cds-alias-viz-general-6-aqua: var(--cds-global-color-aqua-50);
--cds-alias-viz-general-7-violet: var(--cds-global-color-violet-200);
--cds-alias-viz-general-8-lime: var(--cds-global-color-lime-100);
--cds-alias-viz-general-9-blue: var(--cds-global-color-blue-300);
--cds-alias-viz-general-10-lime: var(--cds-global-color-lime-50);
--cds-alias-viz-general-11-aqua: var(--cds-global-color-aqua-400);
--cds-alias-viz-general-12-violet: var(--cds-global-color-violet-50);
--cds-alias-viz-general-13-violet: var(--cds-global-color-violet-300);
--cds-alias-viz-general-14-blue: var(--cds-global-color-blue-50);
--cds-alias-viz-general-15-aqua: var(--cds-global-color-aqua-300);
--cds-alias-viz-general-16-lime: var(--cds-global-color-lime-200);
--cds-alias-viz-severity-neutral: var(--cds-global-color-construction-300);
--cds-alias-viz-severity-success: var(--cds-global-color-green-500);
--cds-alias-viz-severity-warning: var(--cds-global-color-yellow-300);
--cds-alias-viz-severity-immediate: var(--cds-global-color-tangerine-400);
--cds-alias-viz-severity-critical: var(--cds-global-color-red-700);
--cds-alias-viz-sequential-blue-50: var(--cds-global-color-blue-1000);
--cds-alias-viz-sequential-blue-100: var(--cds-global-color-blue-900);
--cds-alias-viz-sequential-blue-200: var(--cds-global-color-blue-800);
--cds-alias-viz-sequential-blue-300: var(--cds-global-color-blue-700);
--cds-alias-viz-sequential-blue-400: var(--cds-global-color-blue-600);
--cds-alias-viz-sequential-blue-500: var(--cds-global-color-blue-500);
--cds-alias-viz-sequential-blue-600: var(--cds-global-color-blue-400);
--cds-alias-viz-sequential-blue-700: var(--cds-global-color-blue-300);
--cds-alias-viz-sequential-blue-800: var(--cds-global-color-blue-200);
--cds-alias-viz-sequential-blue-900: var(--cds-global-color-blue-100);
--cds-alias-viz-sequential-blue-1000: var(--cds-global-color-blue-50);
--cds-alias-viz-sequential-violet-50: var(--cds-global-color-violet-1000);
--cds-alias-viz-sequential-violet-100: var(--cds-global-color-violet-900);
--cds-alias-viz-sequential-violet-200: var(--cds-global-color-violet-800);
--cds-alias-viz-sequential-violet-300: var(--cds-global-color-violet-700);
--cds-alias-viz-sequential-violet-400: var(--cds-global-color-violet-600);
--cds-alias-viz-sequential-violet-500: var(--cds-global-color-violet-500);
--cds-alias-viz-sequential-violet-600: var(--cds-global-color-violet-400);
--cds-alias-viz-sequential-violet-700: var(--cds-global-color-violet-300);
--cds-alias-viz-sequential-violet-800: var(--cds-global-color-violet-200);
--cds-alias-viz-sequential-violet-900: var(--cds-global-color-violet-100);
--cds-alias-viz-sequential-violet-1000: var(--cds-global-color-violet-50);
--cds-alias-viz-sequential-ochre-50: var(--cds-global-color-ochre-1000);
--cds-alias-viz-sequential-ochre-100: var(--cds-global-color-ochre-900);
--cds-alias-viz-sequential-ochre-200: var(--cds-global-color-ochre-800);
--cds-alias-viz-sequential-ochre-300: var(--cds-global-color-ochre-700);
--cds-alias-viz-sequential-ochre-400: var(--cds-global-color-ochre-600);
--cds-alias-viz-sequential-ochre-500: var(--cds-global-color-ochre-500);
--cds-alias-viz-sequential-ochre-600: var(--cds-global-color-ochre-400);
--cds-alias-viz-sequential-ochre-700: var(--cds-global-color-ochre-300);
--cds-alias-viz-sequential-ochre-800: var(--cds-global-color-ochre-200);
--cds-alias-viz-sequential-ochre-900: var(--cds-global-color-ochre-100);
--cds-alias-viz-sequential-ochre-1000: var(--cds-global-color-ochre-50);
--cds-alias-viz-sequential-aqua-50: var(--cds-global-color-aqua-1000);
--cds-alias-viz-sequential-aqua-100: var(--cds-global-color-aqua-900);
--cds-alias-viz-sequential-aqua-200: var(--cds-global-color-aqua-800);
--cds-alias-viz-sequential-aqua-300: var(--cds-global-color-aqua-700);
--cds-alias-viz-sequential-aqua-400: var(--cds-global-color-aqua-600);
--cds-alias-viz-sequential-aqua-500: var(--cds-global-color-aqua-500);
--cds-alias-viz-sequential-aqua-600: var(--cds-global-color-aqua-400);
--cds-alias-viz-sequential-aqua-700: var(--cds-global-color-aqua-300);
--cds-alias-viz-sequential-aqua-800: var(--cds-global-color-aqua-200);
--cds-alias-viz-sequential-aqua-900: var(--cds-global-color-aqua-100);
--cds-alias-viz-sequential-aqua-1000: var(--cds-global-color-aqua-50);
--cds-alias-viz-sequential-green-50: var(--cds-global-color-green-1000);
--cds-alias-viz-sequential-green-100: var(--cds-global-color-green-900);
--cds-alias-viz-sequential-green-200: var(--cds-global-color-green-800);
--cds-alias-viz-sequential-green-300: var(--cds-global-color-green-700);
--cds-alias-viz-sequential-green-400: var(--cds-global-color-green-600);
--cds-alias-viz-sequential-green-500: var(--cds-global-color-green-500);
--cds-alias-viz-sequential-green-600: var(--cds-global-color-green-400);
--cds-alias-viz-sequential-green-700: var(--cds-global-color-green-300);
--cds-alias-viz-sequential-green-800: var(--cds-global-color-green-200);
--cds-alias-viz-sequential-green-900: var(--cds-global-color-green-100);
--cds-alias-viz-sequential-green-1000: var(--cds-global-color-green-50);
--cds-alias-viz-sequential-red-50: var(--cds-global-color-red-1000);
--cds-alias-viz-sequential-red-100: var(--cds-global-color-red-900);
--cds-alias-viz-sequential-red-200: var(--cds-global-color-red-800);
--cds-alias-viz-sequential-red-300: var(--cds-global-color-red-700);
--cds-alias-viz-sequential-red-400: var(--cds-global-color-red-600);
--cds-alias-viz-sequential-red-500: var(--cds-global-color-red-500);
--cds-alias-viz-sequential-red-600: var(--cds-global-color-red-400);
--cds-alias-viz-sequential-red-700: var(--cds-global-color-red-300);
--cds-alias-viz-sequential-red-800: var(--cds-global-color-red-200);
--cds-alias-viz-sequential-red-900: var(--cds-global-color-red-100);
--cds-alias-viz-sequential-red-1000: var(--cds-global-color-red-50);
}

0 comments on commit a855a0b

Please sign in to comment.