Sable/src/colors.css.ts at 992f5f56b4698cc9f2a1a0939535d47f8c9ea499 · Elec3137/Sable · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
import { createTheme } from '@vanilla-extract/css';
import { color } from 'folds';

// just grabs values from the other files for all the legacy components yet to be updated
const sableThemeMapping = {
  Background: {
    Container: 'var(--sable-bg-container)',
    ContainerHover: 'var(--sable-bg-container-hover)',
    ContainerActive: 'var(--sable-bg-container-active)',
    ContainerLine: 'var(--sable-bg-container-line)',
    OnContainer: 'var(--sable-bg-on-container)',
  },
  Surface: {
    Container: 'var(--sable-surface-container)',
    ContainerHover: 'var(--sable-surface-container-hover)',
    ContainerActive: 'var(--sable-surface-container-active)',
    ContainerLine: 'var(--sable-surface-container-line)',
    OnContainer: 'var(--sable-surface-on-container)',
  },
  SurfaceVariant: {
    Container: 'var(--sable-surface-var-container)',
    ContainerHover: 'var(--sable-surface-var-container-hover)',
    ContainerActive: 'var(--sable-surface-var-container-active)',
    ContainerLine: 'var(--sable-surface-var-container-line)',
    OnContainer: 'var(--sable-surface-var-on-container)',
  },
  Primary: {
    Main: 'var(--sable-primary-main)',
    MainHover: 'var(--sable-primary-main-hover)',
    MainActive: 'var(--sable-primary-main-active)',
    MainLine: 'var(--sable-primary-main-line)',
    OnMain: 'var(--sable-primary-on-main)',
    Container: 'var(--sable-primary-container)',
    ContainerHover: 'var(--sable-primary-container-hover)',
    ContainerActive: 'var(--sable-primary-container-active)',
    ContainerLine: 'var(--sable-primary-container-line)',
    OnContainer: 'var(--sable-primary-on-container)',
  },
  Secondary: {
    Main: 'var(--sable-sec-main)',
    MainHover: 'var(--sable-sec-main-hover)',
    MainActive: 'var(--sable-sec-main-active)',
    MainLine: 'var(--sable-sec-main-line)',
    OnMain: 'var(--sable-sec-on-main)',
    Container: 'var(--sable-sec-container)',
    ContainerHover: 'var(--sable-sec-container-hover)',
    ContainerActive: 'var(--sable-sec-container-active)',
    ContainerLine: 'var(--sable-sec-container-line)',
    OnContainer: 'var(--sable-sec-on-container)',
  },
  Success: {
    Main: 'var(--sable-success-main)',
    MainHover: 'var(--sable-success-main-hover)',
    MainActive: 'var(--sable-success-main-active)',
    MainLine: 'var(--sable-success-main-line)',
    OnMain: 'var(--sable-success-on-main)',
    Container: 'var(--sable-success-container)',
    ContainerHover: 'var(--sable-success-container-hover)',
    ContainerActive: 'var(--sable-success-container-active)',
    ContainerLine: 'var(--sable-success-container-line)',
    OnContainer: 'var(--sable-success-on-container)',
  },
  Warning: {
    Main: 'var(--sable-warn-main)',
    MainHover: 'var(--sable-warn-main-hover)',
    MainActive: 'var(--sable-warn-main-active)',
    MainLine: 'var(--sable-warn-main-line)',
    OnMain: 'var(--sable-warn-on-main)',
    Container: 'var(--sable-warn-container)',
    ContainerHover: 'var(--sable-warn-container-hover)',
    ContainerActive: 'var(--sable-warn-container-active)',
    ContainerLine: 'var(--sable-warn-container-line)',
    OnContainer: 'var(--sable-warn-on-container)',
  },
  Critical: {
    Main: 'var(--sable-crit-main)',
    MainHover: 'var(--sable-crit-main-hover)',
    MainActive: 'var(--sable-crit-main-active)',
    MainLine: 'var(--sable-crit-main-line)',
    OnMain: 'var(--sable-crit-on-main)',
    Container: 'var(--sable-crit-container)',
    ContainerHover: 'var(--sable-crit-container-hover)',
    ContainerActive: 'var(--sable-crit-container-active)',
    ContainerLine: 'var(--sable-crit-container-line)',
    OnContainer: 'var(--sable-crit-on-container)',
  },
  Other: {
    FocusRing: 'var(--sable-focus-ring)',
    Shadow: 'var(--sable-shadow)',
    Overlay: 'var(--sable-overlay)',
  },
};

export const silverTheme = createTheme(color, sableThemeMapping);
export const cinnyLightTheme = createTheme(color, sableThemeMapping);
export const cinnySilverTheme = createTheme(color, sableThemeMapping);
export const darkTheme = createTheme(color, sableThemeMapping);
export const butterTheme = createTheme(color, sableThemeMapping);
export const lightTheme = createTheme(color, sableThemeMapping);
export const gruvdarkTheme = createTheme(color, sableThemeMapping);
export const rosePineTheme = createTheme(color, sableThemeMapping);
export const cinnyDarkTheme = createTheme(color, sableThemeMapping);
export const accordTheme = createTheme(color, sableThemeMapping);
export const blackTheme = createTheme(color, sableThemeMapping);