cloudstore/tailwind.config.js at main · cleat-cloud/cloudstore · 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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
/** @type {import("tailwindcss").Config} */
module.exports = {
  content: ["./web/templates/**/*.html", "./web/static/js/*.js"],
  safelist: [
    "cais-password-wrap",
    "cais-password-toggle",
    "cais-chat-scroll-down",
    "cais-thinking",
    "cais-thinking-dots",
    "cais-select-search",
    "cais-select-search-native",
    "cais-select-search-trigger",
    "cais-select-search-panel",
    "cais-select-search-input",
    "cais-select-search-list",
    "cais-select-search-option",
    "cais-select-search-label",
    "cais-select-search-chevron",
    "is-selected",
    "is-highlighted",
    "is-hidden",
  ],
  theme: {
    extend: {
      colors: {
        // CloudStore M3 token palette (from the Stitch design export).
        "on-error": "rgb(var(--cs-on-error) / <alpha-value>)",
        "tertiary-container": "rgb(var(--cs-tertiary-container) / <alpha-value>)",
        "on-surface-variant": "rgb(var(--cs-on-surface-variant) / <alpha-value>)",
        "on-error-container": "rgb(var(--cs-on-error-container) / <alpha-value>)",
        "on-tertiary-container": "rgb(var(--cs-on-tertiary-container) / <alpha-value>)",
        "surface-tint": "rgb(var(--cs-surface-tint) / <alpha-value>)",
        "on-primary-container": "rgb(var(--cs-on-primary-container) / <alpha-value>)",
        "on-primary": "rgb(var(--cs-on-primary) / <alpha-value>)",
        "surface-variant": "rgb(var(--cs-surface-variant) / <alpha-value>)",
        error: "rgb(var(--cs-error) / <alpha-value>)",
        "inverse-primary": "rgb(var(--cs-inverse-primary) / <alpha-value>)",
        "tertiary-fixed-dim": "rgb(var(--cs-tertiary-fixed-dim) / <alpha-value>)",
        "surface-container-low": "rgb(var(--cs-surface-container-low) / <alpha-value>)",
        "on-secondary-fixed-variant": "rgb(var(--cs-on-secondary-fixed-variant) / <alpha-value>)",
        "on-secondary": "rgb(var(--cs-on-secondary) / <alpha-value>)",
        "on-primary-fixed": "rgb(var(--cs-on-primary-fixed) / <alpha-value>)",
        "tertiary-fixed": "rgb(var(--cs-tertiary-fixed) / <alpha-value>)",
        outline: "rgb(var(--cs-outline) / <alpha-value>)",
        "secondary-fixed": "rgb(var(--cs-secondary-fixed) / <alpha-value>)",
        "primary-container": "rgb(var(--cs-primary-container) / <alpha-value>)",
        "inverse-on-surface": "rgb(var(--cs-inverse-on-surface) / <alpha-value>)",
        "on-tertiary-fixed-variant": "rgb(var(--cs-on-tertiary-fixed-variant) / <alpha-value>)",
        "primary-fixed-dim": "rgb(var(--cs-primary-fixed-dim) / <alpha-value>)",
        "error-container": "rgb(var(--cs-error-container) / <alpha-value>)",
        tertiary: "rgb(var(--cs-tertiary) / <alpha-value>)",
        "on-secondary-container": "rgb(var(--cs-on-secondary-container) / <alpha-value>)",
        "surface-container-lowest": "rgb(var(--cs-surface-container-lowest) / <alpha-value>)",
        "surface-container-high": "rgb(var(--cs-surface-container-high) / <alpha-value>)",
        background: "rgb(var(--cs-background) / <alpha-value>)",
        "on-background": "rgb(var(--cs-on-background) / <alpha-value>)",
        surface: "rgb(var(--cs-surface) / <alpha-value>)",
        "secondary-fixed-dim": "rgb(var(--cs-secondary-fixed-dim) / <alpha-value>)",
        primary: "rgb(var(--cs-primary) / <alpha-value>)",
        secondary: "rgb(var(--cs-secondary) / <alpha-value>)",
        "inverse-surface": "rgb(var(--cs-inverse-surface) / <alpha-value>)",
        "on-secondary-fixed": "rgb(var(--cs-on-secondary-fixed) / <alpha-value>)",
        "on-primary-fixed-variant": "rgb(var(--cs-on-primary-fixed-variant) / <alpha-value>)",
        "surface-bright": "rgb(var(--cs-surface-bright) / <alpha-value>)",
        "on-tertiary-fixed": "rgb(var(--cs-on-tertiary-fixed) / <alpha-value>)",
        "surface-container-highest": "rgb(var(--cs-surface-container-highest) / <alpha-value>)",
        "primary-fixed": "rgb(var(--cs-primary-fixed) / <alpha-value>)",
        "surface-dim": "rgb(var(--cs-surface-dim) / <alpha-value>)",
        "surface-container": "rgb(var(--cs-surface-container) / <alpha-value>)",
        "outline-variant": "rgb(var(--cs-outline-variant) / <alpha-value>)",
        "on-surface": "rgb(var(--cs-on-surface) / <alpha-value>)",
        "secondary-container": "rgb(var(--cs-secondary-container) / <alpha-value>)",
        "on-tertiary": "rgb(var(--cs-on-tertiary) / <alpha-value>)",
        // Scaffold kit aliases kept so shipped components keep working; repointed
        // to the CloudStore palette so the console reads blue instead of copper.
        ink: "rgb(var(--cs-surface) / <alpha-value>)",
        foam: "rgb(var(--cs-on-surface) / <alpha-value>)",
        copper: "rgb(var(--cs-primary-container) / <alpha-value>)",
        tide: "rgb(var(--cs-surface-container) / <alpha-value>)",
      },
      borderRadius: {
        DEFAULT: "0.125rem",
        md: "0.375rem",
        lg: "0.25rem",
        xl: "0.5rem",
        full: "9999px",
      },
      spacing: {
        gutter: "1rem",
        "space-xs": "0.25rem",
        "space-sm": "0.5rem",
        "space-md": "0.75rem",
        "space-lg": "1.25rem",
        "space-xl": "1.75rem",
        margin: "1.25rem",
      },
      fontFamily: {
        sans: ["Geist", "Avenir Next", "Segoe UI", "Helvetica Neue", "system-ui", "sans-serif"],
        mono: ['"JetBrains Mono"', "ui-monospace", "SFMono-Regular", "Menlo", "monospace"],
        "headline-xl": ["Geist", "system-ui", "sans-serif"],
        "headline-lg": ["Geist", "system-ui", "sans-serif"],
        "headline-md": ["Geist", "system-ui", "sans-serif"],
        "headline-sm": ["Geist", "system-ui", "sans-serif"],
        "body-lg": ["Geist", "system-ui", "sans-serif"],
        "body-md": ["Geist", "system-ui", "sans-serif"],
        "body-sm": ["Geist", "system-ui", "sans-serif"],
        "label-md": ["Geist", "system-ui", "sans-serif"],
        "label-sm": ["Geist", "system-ui", "sans-serif"],
        "code-md": ['"JetBrains Mono"', "ui-monospace", "monospace"],
        "code-sm": ['"JetBrains Mono"', "ui-monospace", "monospace"],
      },
      fontSize: {
        "headline-xl": [
          "28px",
          { lineHeight: "36px", letterSpacing: "-0.02em", fontWeight: "600" },
        ],
        "headline-lg": [
          "22px",
          { lineHeight: "28px", letterSpacing: "-0.015em", fontWeight: "600" },
        ],
        "headline-md": [
          "18px",
          { lineHeight: "24px", letterSpacing: "-0.01em", fontWeight: "600" },
        ],
        "headline-sm": [
          "15px",
          { lineHeight: "20px", letterSpacing: "-0.005em", fontWeight: "600" },
        ],
        "body-lg": ["14px", { lineHeight: "20px", fontWeight: "400" }],
        "body-md": ["13px", { lineHeight: "18px", fontWeight: "400" }],
        "body-sm": ["12px", { lineHeight: "16px", fontWeight: "400" }],
        "label-md": ["12px", { lineHeight: "16px", letterSpacing: "0.01em", fontWeight: "500" }],
        "label-sm": ["11px", { lineHeight: "14px", letterSpacing: "0.02em", fontWeight: "600" }],
        "code-md": ["12px", { lineHeight: "16px", fontWeight: "400" }],
        "code-sm": ["11px", { lineHeight: "14px", fontWeight: "500" }],
      },
      boxShadow: {
        "2xs": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
        xs: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
      },
    },
  },
  plugins: [],
};