Skip to content

Commit 86e6a6e

Browse files
MM25ZamanianMM25Zamanian
committed
feat(styles/color-scheme): add static ref colors
1 parent f1643c1 commit 86e6a6e

File tree

3 files changed

+124
-1
lines changed

3 files changed

+124
-1
lines changed

‎packages/styles/src/plugins/color-scheme.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
import plugin from 'tailwindcss/plugin.js';
22

3+
import {darkColorTheme} from './dark.color-scheme';
4+
import {lightColorTheme} from './light.color-scheme';
5+
36
import type {Config} from 'tailwindcss';
47

58
export const _colorSchemeLight = {
@@ -158,7 +161,7 @@ export const _colorTheme = {
158161
} as const;
159162

160163
export const colorTheme: Config['theme'] = {
161-
colors: _colorTheme,
164+
colors: {..._colorTheme, ...darkColorTheme, ...lightColorTheme},
162165
};
163166

164167
export const colorPlugin = plugin(({addUtilities}) => {

‎packages/styles/src/plugins/dark.color-scheme.ts‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
export const darkColorTheme = {
2+
/**
3+
* Primary colors
4+
*/
5+
darkPrimary: 'rgba(var(--ref-palette-primary80), <alpha-value>)',
6+
darkPrimaryContainer: 'rgba(var(--ref-palette-primary30), <alpha-value>)',
7+
darkOnPrimary: 'rgba(var(--ref-palette-primary20), <alpha-value>)',
8+
darkOnPrimaryContainer: 'rgba(var(--ref-palette-primary90), <alpha-value>)',
9+
darkInversePrimary: 'rgba(var(--ref-palette-primary40), <alpha-value>)',
10+
/**
11+
* Secondary colors
12+
*/
13+
darkSecondary: 'rgba(var(--ref-palette-secondary80), <alpha-value>)',
14+
darkSecondaryContainer: 'rgba(var(--ref-palette-secondary30), <alpha-value>)',
15+
darkOnSecondary: 'rgba(var(--ref-palette-secondary20), <alpha-value>)',
16+
darkOnSecondaryContainer: 'rgba(var(--ref-palette-secondary90), <alpha-value>)',
17+
/**
18+
* Tertiary colors
19+
*/
20+
darkTertiary: 'rgba(var(--ref-palette-tertiary80), <alpha-value>)',
21+
darkTertiaryContainer: 'rgba(var(--ref-palette-tertiary30), <alpha-value>)',
22+
darkOnTertiary: 'rgba(var(--ref-palette-tertiary20), <alpha-value>)',
23+
darkOnTertiaryContainer: 'rgba(var(--ref-palette-tertiary90), <alpha-value>)',
24+
/**
25+
* Surface colors
26+
*/
27+
darkBackground: 'rgba(var(--ref-palette-neutral6), <alpha-value>)',
28+
darkSurface: 'rgba(var(--ref-palette-neutral6), <alpha-value>)',
29+
darkSurfaceDim: 'rgba(var(--ref-palette-neutral6), <alpha-value>)',
30+
darkSurfaceBright: 'rgba(var(--ref-palette-neutral24), <alpha-value>)',
31+
darkSurfaceContainerLowest: 'rgba(var(--ref-palette-neutral4), <alpha-value>)',
32+
darkSurfaceContainerLow: 'rgba(var(--ref-palette-neutral10), <alpha-value>)',
33+
darkSurfaceContainer: 'rgba(var(--ref-palette-neutral12), <alpha-value>)',
34+
darkSurfaceContainerHigh: 'rgba(var(--ref-palette-neutral17), <alpha-value>)',
35+
darkSurfaceContainerHighest: 'rgba(var(--ref-palette-neutral22), <alpha-value>)',
36+
darkSurfaceVariant: 'rgba(var(--ref-palette-neutral-variant30), <alpha-value>)',
37+
darkInverseSurface: 'rgba(var(--ref-palette-neutral90), <alpha-value>)',
38+
darkOnBackground: 'rgba(var(--ref-palette-neutral90), <alpha-value>)',
39+
darkOnSurface: 'rgba(var(--ref-palette-neutral90), <alpha-value>)',
40+
darkOnSurfaceVariant: 'rgba(var(--ref-palette-neutral-variant80), <alpha-value>)',
41+
darkInverseOnSurface: 'rgba(var(--ref-palette-neutral20), <alpha-value>)',
42+
/**
43+
* Outline colors
44+
*/
45+
darkOutline: 'rgba(var(--ref-palette-neutral-variant60), <alpha-value>)',
46+
darkOutlineVariant: 'rgba(var(--ref-palette-neutral-variant30), <alpha-value>)',
47+
/**
48+
* Error colors
49+
*/
50+
darkError: 'rgba(var(--ref-palette-error80), <alpha-value>)',
51+
darkErrorContainer: 'rgba(var(--ref-palette-error30), <alpha-value>)',
52+
darkOnError: 'rgba(var(--ref-palette-error20), <alpha-value>)',
53+
darkOnErrorContainer: 'rgba(var(--ref-palette-error90), <alpha-value>)',
54+
/**
55+
* Other colors
56+
*/
57+
darkSurfaceTint: 'rgba(var(--ref-palette-primary80), <alpha-value>)', // Use primary for surfaceTint
58+
darkShadow: 'rgba(var(--ref-palette-neutral0), <alpha-value>)',
59+
darkScrim: 'rgba(var(--ref-palette-neutral0), <alpha-value>)',
60+
} as const;

‎packages/styles/src/plugins/light.color-scheme.ts‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
export const lightColorTheme = {
2+
/**
3+
* Primary colors
4+
*/
5+
lightPrimary: 'rgba(var(--ref-palette-primary40), <alpha-value>)',
6+
lightPrimaryContainer: 'rgba(var(--ref-palette-primary90), <alpha-value>)',
7+
lightOnPrimary: 'rgba(255, 255, 255, <alpha-value>)',
8+
lightOnPrimaryContainer: 'rgba(var(--ref-palette-primary10), <alpha-value>)',
9+
lightInversePrimary: 'rgba(var(--ref-palette-primary80), <alpha-value>)',
10+
/**
11+
* Secondary colors
12+
*/
13+
lightSecondary: 'rgba(var(--ref-palette-secondary40), <alpha-value>)',
14+
lightSecondaryContainer: 'rgba(var(--ref-palette-secondary90), <alpha-value>)',
15+
lightOnSecondary: 'rgba(255, 255, 255, <alpha-value>)',
16+
lightOnSecondaryContainer: 'rgba(var(--ref-palette-secondary10), <alpha-value>)',
17+
/**
18+
* Tertiary colors
19+
*/
20+
lightTertiary: 'rgba(var(--ref-palette-tertiary40), <alpha-value>)',
21+
lightTertiaryContainer: 'rgba(var(--ref-palette-tertiary90), <alpha-value>)',
22+
lightOnTertiary: 'rgba(255, 255, 255, <alpha-value>)',
23+
lightOnTertiaryContainer: 'rgba(var(--ref-palette-tertiary10), <alpha-value>)',
24+
/**
25+
* Surface colors
26+
*/
27+
lightBackground: 'rgba(var(--ref-palette-neutral98), <alpha-value>)',
28+
lightSurface: 'rgba(var(--ref-palette-neutral98), <alpha-value>)',
29+
lightSurfaceDim: 'rgba(var(--ref-palette-neutral87), <alpha-value>)',
30+
lightSurfaceBright: 'rgba(var(--ref-palette-neutral98), <alpha-value>)',
31+
lightSurfaceContainerLowest: 'rgba(255, 255, 255, <alpha-value>)',
32+
lightSurfaceContainerLow: 'rgba(var(--ref-palette-neutral96), <alpha-value>)',
33+
lightSurfaceContainer: 'rgba(var(--ref-palette-neutral94), <alpha-value>)',
34+
lightSurfaceContainerHigh: 'rgba(var(--ref-palette-neutral92), <alpha-value>)',
35+
lightSurfaceContainerHighest: 'rgba(var(--ref-palette-neutral90), <alpha-value>)',
36+
lightSurfaceVariant: 'rgba(var(--ref-palette-neutral-variant90), <alpha-value>)',
37+
lightInverseSurface: 'rgba(var(--ref-palette-neutral20), <alpha-value>)',
38+
lightOnBackground: 'rgba(var(--ref-palette-neutral10), <alpha-value>)',
39+
lightOnSurface: 'rgba(var(--ref-palette-neutral10), <alpha-value>)',
40+
lightOnSurfaceVariant: 'rgba(var(--ref-palette-neutral-variant30), <alpha-value>)',
41+
lightInverseOnSurface: 'rgba(var(--ref-palette-neutral95), <alpha-value>)',
42+
/**
43+
* Outline colors
44+
*/
45+
lightOutline: 'rgba(var(--ref-palette-neutral-variant50), <alpha-value>)',
46+
lightOutlineVariant: 'rgba(var(--ref-palette-neutral-variant80), <alpha-value>)',
47+
/**
48+
* Error colors
49+
*/
50+
lightError: 'rgba(var(--ref-palette-error40), <alpha-value>)',
51+
lightErrorContainer: 'rgba(var(--ref-palette-error90), <alpha-value>)',
52+
lightOnError: 'rgba(255, 255, 255, <alpha-value>)',
53+
lightOnErrorContainer: 'rgba(var(--ref-palette-error10), <alpha-value>)',
54+
/**
55+
* Other colors
56+
*/
57+
lightSurfaceTint: 'rgba(var(--ref-palette-primary40), <alpha-value>)',
58+
lightShadow: 'rgba(var(--ref-palette-neutral0), <alpha-value>)',
59+
lightScrim: 'rgba(var(--ref-palette-neutral0), <alpha-value>)',
60+
};

0 commit comments

Comments
 (0)