@sandlada/material-design-css 2.3.0-20250927.c → 2.4.0-20260426.a
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +78 -10
- package/color/bg-utilities.css +56 -56
- package/color/text-utilities.css +56 -56
- package/motion/animation-utilities.css +93 -51
- package/package.json +84 -59
- package/prebuild-color/tonal-spot/blue-2025-high-contrast.css +62 -0
- package/prebuild-color/tonal-spot/blue-2025-low-contrast.css +62 -0
- package/prebuild-color/tonal-spot/blue-2025.css +62 -0
- package/prebuild-color/tonal-spot/brown-2025-high-contrast.css +62 -0
- package/prebuild-color/tonal-spot/brown-2025-low-contrast.css +62 -0
- package/prebuild-color/tonal-spot/brown-2025.css +62 -0
- package/prebuild-color/tonal-spot/cyan-2025-high-contrast.css +62 -0
- package/prebuild-color/tonal-spot/cyan-2025-low-contrast.css +62 -0
- package/prebuild-color/tonal-spot/cyan-2025.css +62 -0
- package/prebuild-color/tonal-spot/green-2025-high-contrast.css +62 -0
- package/prebuild-color/tonal-spot/green-2025-low-contrast.css +62 -0
- package/prebuild-color/tonal-spot/green-2025.css +62 -0
- package/prebuild-color/tonal-spot/navy-2025-high-contrast.css +62 -0
- package/prebuild-color/tonal-spot/navy-2025-low-contrast.css +62 -0
- package/prebuild-color/tonal-spot/navy-2025.css +62 -0
- package/prebuild-color/tonal-spot/orange-2025-high-contrast.css +62 -0
- package/prebuild-color/tonal-spot/orange-2025-low-contrast.css +62 -0
- package/prebuild-color/tonal-spot/orange-2025.css +62 -0
- package/prebuild-color/tonal-spot/pink-2025-high-contrast.css +62 -0
- package/prebuild-color/tonal-spot/pink-2025-low-contrast.css +62 -0
- package/prebuild-color/tonal-spot/pink-2025.css +62 -0
- package/prebuild-color/tonal-spot/purple-2025-high-contrast.css +62 -0
- package/prebuild-color/tonal-spot/purple-2025-low-contrast.css +62 -0
- package/prebuild-color/tonal-spot/purple-2025.css +62 -0
- package/prebuild-color/tonal-spot/red-2025-high-contrast.css +62 -0
- package/prebuild-color/tonal-spot/red-2025-low-contrast.css +62 -0
- package/prebuild-color/tonal-spot/red-2025.css +62 -0
- package/prebuild-color/tonal-spot/yellow-2025-high-contrast.css +62 -0
- package/prebuild-color/tonal-spot/yellow-2025-low-contrast.css +62 -0
- package/prebuild-color/tonal-spot/yellow-2025.css +62 -0
- package/shape/shape-utilities.css +128 -75
- package/typography/tailwind-theme.css +180 -180
- package/typography/tailwind-utilities.css +30 -30
- package/typography/typography-utilities.css +1 -2
package/README.md
CHANGED
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
|
|
11
11
|
- Color
|
|
12
12
|
- Palette
|
|
13
|
+
- Prebuilt Color
|
|
13
14
|
- Motion
|
|
14
15
|
- Shape
|
|
15
16
|
- Typography
|
|
@@ -29,8 +30,9 @@ npm i @sandlada/material-design-css
|
|
|
29
30
|
```typescript
|
|
30
31
|
// TypeScript File
|
|
31
32
|
// If you are using Vite or Webpack.
|
|
33
|
+
// In CSS file, use @import instead. (You may need to adjust the path depending on your setup, e.g., `@import "../node_modules/@sandlada/material-design-css/preset.css";`)
|
|
32
34
|
|
|
33
|
-
// Load preset
|
|
35
|
+
// Load preset before color or prebuilt-color utilities.
|
|
34
36
|
import '@sandlada/material-design-css/preset.css'
|
|
35
37
|
|
|
36
38
|
// text-on-surface
|
|
@@ -39,10 +41,10 @@ import '@sandlada/material-design-css/color/text-utilities.css'
|
|
|
39
41
|
// bg-surface
|
|
40
42
|
import '@sandlada/material-design-css/color/bg-utilities.css'
|
|
41
43
|
|
|
42
|
-
// text-primary-0
|
|
44
|
+
// text-primary-0
|
|
43
45
|
import '@sandlada/material-design-css/palette/text-utilities.css'
|
|
44
46
|
|
|
45
|
-
// bg-primary-100
|
|
47
|
+
// bg-primary-100
|
|
46
48
|
import '@sandlada/material-design-css/palette/bg-utilities.css'
|
|
47
49
|
|
|
48
50
|
// display-large
|
|
@@ -58,17 +60,75 @@ import '@sandlada/material-design-css/motion/animation-utilities.css'
|
|
|
58
60
|
import '@sandlada/material-design-css/motion/transition-utilities.css'
|
|
59
61
|
```
|
|
60
62
|
|
|
63
|
+
#### Prebuilt Color
|
|
64
|
+
|
|
65
|
+
Use one file from `prebuild-color/` when you want a ready-made palette instead of generating one yourself.
|
|
66
|
+
|
|
67
|
+
```typescript
|
|
68
|
+
import '@sandlada/material-design-css/preset.css'
|
|
69
|
+
|
|
70
|
+
import '@sandlada/material-design-css/prebuild-color/orange.css'
|
|
71
|
+
import '@sandlada/material-design-css/color/text-utilities.css'
|
|
72
|
+
import '@sandlada/material-design-css/color/bg-utilities.css'
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
Available presets:
|
|
76
|
+
|
|
77
|
+
- `blue`
|
|
78
|
+
- `cold-blue`
|
|
79
|
+
- `cold-purple`
|
|
80
|
+
- `green`
|
|
81
|
+
- `light-green`
|
|
82
|
+
- `monochrome`
|
|
83
|
+
- `monochrome-high-contrast`
|
|
84
|
+
- `monochrome-low-contrast`
|
|
85
|
+
- `orange`
|
|
86
|
+
- `pink`
|
|
87
|
+
- `viridian`
|
|
88
|
+
- `yellow`
|
|
89
|
+
|
|
90
|
+
##### Tonal Spot (2025)
|
|
91
|
+
|
|
92
|
+
Algorithmically-generated palettes in `prebuild-color/tonal-spot/`. Each color comes in three contrast variants: default, `-low-contrast`, and `-high-contrast`.
|
|
93
|
+
|
|
94
|
+
```typescript
|
|
95
|
+
import '@sandlada/material-design-css/preset.css'
|
|
96
|
+
|
|
97
|
+
import '@sandlada/material-design-css/prebuild-color/tonal-spot/red-2025.css'
|
|
98
|
+
import '@sandlada/material-design-css/color/text-utilities.css'
|
|
99
|
+
import '@sandlada/material-design-css/color/bg-utilities.css'
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
Available tonal spot presets:
|
|
103
|
+
|
|
104
|
+
- `blue-2025`
|
|
105
|
+
- `brown-2025`
|
|
106
|
+
- `cyan-2025`
|
|
107
|
+
- `green-2025`
|
|
108
|
+
- `navy-2025`
|
|
109
|
+
- `orange-2025`
|
|
110
|
+
- `pink-2025`
|
|
111
|
+
- `purple-2025`
|
|
112
|
+
- `red-2025`
|
|
113
|
+
- `yellow-2025`
|
|
114
|
+
|
|
115
|
+
`preset.css` also defines the light and dark color-scheme contract used by the color utilities. Toggle the `dark` attribute on `:root` to switch themes.
|
|
116
|
+
|
|
61
117
|
### For TailwindCSS v4
|
|
62
118
|
|
|
63
119
|
```css
|
|
64
|
-
@layer theme, base, components, utilities;
|
|
65
|
-
|
|
66
120
|
@import "tailwindcss";
|
|
67
121
|
|
|
68
|
-
/**
|
|
122
|
+
/**
|
|
123
|
+
* Optional ready-made palette.
|
|
124
|
+
* Replace `orange` with any file under `prebuild-color/`.
|
|
125
|
+
*/
|
|
126
|
+
@import "@sandlada/material-design-css/prebuild-color/orange.css";
|
|
127
|
+
|
|
128
|
+
/**
|
|
69
129
|
* bg-primary
|
|
70
130
|
* text-on-primary
|
|
71
|
-
*/
|
|
131
|
+
*/
|
|
72
132
|
@import "@sandlada/material-design-css/color/tailwind-theme.css";
|
|
73
133
|
|
|
74
134
|
/**
|
|
@@ -77,10 +137,10 @@ import '@sandlada/material-design-css/motion/transition-utilities.css'
|
|
|
77
137
|
*/
|
|
78
138
|
@import "@sandlada/material-design-css/palette/tailwind-theme.css";
|
|
79
139
|
|
|
80
|
-
/*
|
|
140
|
+
/* rounded-medium */
|
|
81
141
|
@import "@sandlada/material-design-css/shape/tailwind-theme.css";
|
|
82
142
|
|
|
83
|
-
/*
|
|
143
|
+
/*
|
|
84
144
|
* font-display-large
|
|
85
145
|
* text-display-large
|
|
86
146
|
* tracking-display-large
|
|
@@ -108,6 +168,14 @@ import '@sandlada/material-design-css/motion/transition-utilities.css'
|
|
|
108
168
|
}
|
|
109
169
|
```
|
|
110
170
|
|
|
171
|
+
## Naming Conventions
|
|
172
|
+
|
|
173
|
+
- Color utilities use `bg-*` and `text-*`.
|
|
174
|
+
- Prebuilt color files use the filenames from `prebuild-color/`.
|
|
175
|
+
- Shape utilities use `rounded-*` plus directional suffixes like `-t`, `-r`, `-b`, and `-l`.
|
|
176
|
+
- Motion utilities use `animation-*` and `transition-*` with `duration-*` and `easing-*` tokens.
|
|
177
|
+
- Typography utilities use `emphasized-*` for emphasized variants and the base type scale names for standard variants.
|
|
178
|
+
|
|
111
179
|
## Usage
|
|
112
180
|
|
|
113
181
|
Copy this code into your configured project and you will see a button with color and rounded corners.
|
|
@@ -120,4 +188,4 @@ Copy this code into your configured project and you will see a button with color
|
|
|
120
188
|
|
|
121
189
|
## Documentation
|
|
122
190
|
|
|
123
|
-
For more information on how to use, please visit [the project's official website](https://material-design-css.sandlada.com)
|
|
191
|
+
For more information on how to use, please visit [the project's official website](https://material-design-css.sandlada.com)
|
package/color/bg-utilities.css
CHANGED
|
@@ -1,63 +1,63 @@
|
|
|
1
|
-
@layer material-design-system.
|
|
1
|
+
@layer material-design-system.bg-color {
|
|
2
2
|
:root {
|
|
3
|
-
--_bg-color-primary-palette-key-color
|
|
4
|
-
--_bg-color-secondary-palette-key-color
|
|
5
|
-
--_bg-color-tertiary-palette-key-color
|
|
6
|
-
--_bg-color-neutral-palette-key-color
|
|
3
|
+
--_bg-color-primary-palette-key-color: var(--md-sys-color-primary-palette-key-color, light-dark(#578400, #578400));
|
|
4
|
+
--_bg-color-secondary-palette-key-color: var(--md-sys-color-secondary-palette-key-color, light-dark(#697e4a, #697e4a));
|
|
5
|
+
--_bg-color-tertiary-palette-key-color: var(--md-sys-color-tertiary-palette-key-color, light-dark(#00885e, #00885e));
|
|
6
|
+
--_bg-color-neutral-palette-key-color: var(--md-sys-color-neutral-palette-key-color, light-dark(#75786c, #75786c));
|
|
7
7
|
--_bg-color-neutral-variant-palette-key-color: var(--md-sys-color-neutral-variant-palette-key-color, light-dark(#737966, #737966));
|
|
8
|
-
--_bg-color-background
|
|
9
|
-
--_bg-color-on-background
|
|
10
|
-
--_bg-color-surface
|
|
11
|
-
--_bg-color-surface-dim
|
|
12
|
-
--_bg-color-surface-bright
|
|
13
|
-
--_bg-color-surface-container-lowest
|
|
14
|
-
--_bg-color-surface-container-low
|
|
15
|
-
--_bg-color-surface-container
|
|
16
|
-
--_bg-color-surface-container-high
|
|
17
|
-
--_bg-color-surface-container-highest
|
|
18
|
-
--_bg-color-on-surface
|
|
19
|
-
--_bg-color-surface-variant
|
|
20
|
-
--_bg-color-on-surface-variant
|
|
21
|
-
--_bg-color-inverse-surface
|
|
22
|
-
--_bg-color-inverse-on-surface
|
|
23
|
-
--_bg-color-outline
|
|
24
|
-
--_bg-color-outline-variant
|
|
25
|
-
--_bg-color-shadow
|
|
26
|
-
--_bg-color-scrim
|
|
27
|
-
--_bg-color-surface-tint
|
|
28
|
-
--_bg-color-primary
|
|
29
|
-
--_bg-color-on-primary
|
|
30
|
-
--_bg-color-primary-container
|
|
31
|
-
--_bg-color-on-primary-container
|
|
32
|
-
--_bg-color-inverse-primary
|
|
33
|
-
--_bg-color-secondary
|
|
34
|
-
--_bg-color-on-secondary
|
|
35
|
-
--_bg-color-secondary-container
|
|
36
|
-
--_bg-color-on-secondary-container
|
|
37
|
-
--_bg-color-tertiary
|
|
38
|
-
--_bg-color-on-tertiary
|
|
39
|
-
--_bg-color-tertiary-container
|
|
40
|
-
--_bg-color-on-tertiary-container
|
|
41
|
-
--_bg-color-error
|
|
42
|
-
--_bg-color-on-error
|
|
43
|
-
--_bg-color-error-container
|
|
44
|
-
--_bg-color-on-error-container
|
|
45
|
-
--_bg-color-primary-fixed
|
|
46
|
-
--_bg-color-primary-fixed-dim
|
|
47
|
-
--_bg-color-on-primary-fixed
|
|
48
|
-
--_bg-color-on-primary-fixed-variant
|
|
49
|
-
--_bg-color-secondary-fixed
|
|
50
|
-
--_bg-color-secondary-fixed-dim
|
|
51
|
-
--_bg-color-on-secondary-fixed
|
|
52
|
-
--_bg-color-on-secondary-fixed-variant
|
|
53
|
-
--_bg-color-tertiary-fixed
|
|
54
|
-
--_bg-color-tertiary-fixed-dim
|
|
55
|
-
--_bg-color-on-tertiary-fixed
|
|
56
|
-
--_bg-color-on-tertiary-fixed-variant
|
|
8
|
+
--_bg-color-background: var(--md-sys-color-background, light-dark(#f9fbec, #11140c));
|
|
9
|
+
--_bg-color-on-background: var(--md-sys-color-on-background, light-dark(#1a1d14, #e2e4d5));
|
|
10
|
+
--_bg-color-surface: var(--md-sys-color-surface, light-dark(#f9fbec, #11140c));
|
|
11
|
+
--_bg-color-surface-dim: var(--md-sys-color-surface-dim, light-dark(#d9dbcd, #11140c));
|
|
12
|
+
--_bg-color-surface-bright: var(--md-sys-color-surface-bright, light-dark(#f9fbec, #373a30));
|
|
13
|
+
--_bg-color-surface-container-lowest: var(--md-sys-color-surface-container-lowest, light-dark(#ffffff, #0c0f07));
|
|
14
|
+
--_bg-color-surface-container-low: var(--md-sys-color-surface-container-low, light-dark(#f3f5e6, #1a1d14));
|
|
15
|
+
--_bg-color-surface-container: var(--md-sys-color-surface-container, light-dark(#edefe1, #1e2118));
|
|
16
|
+
--_bg-color-surface-container-high: var(--md-sys-color-surface-container-high, light-dark(#e7e9db, #282b22));
|
|
17
|
+
--_bg-color-surface-container-highest: var(--md-sys-color-surface-container-highest, light-dark(#e2e4d5, #33362c));
|
|
18
|
+
--_bg-color-on-surface: var(--md-sys-color-on-surface, light-dark(#1a1d14, #e2e4d5));
|
|
19
|
+
--_bg-color-surface-variant: var(--md-sys-color-surface-variant, light-dark(#dfe5cf, #434938));
|
|
20
|
+
--_bg-color-on-surface-variant: var(--md-sys-color-on-surface-variant, light-dark(#434938, #c3c9b3));
|
|
21
|
+
--_bg-color-inverse-surface: var(--md-sys-color-inverse-surface, light-dark(#2e3228, #e2e4d5));
|
|
22
|
+
--_bg-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface, light-dark(#f0f2e3, #2e3228));
|
|
23
|
+
--_bg-color-outline: var(--md-sys-color-outline, light-dark(#737967, #8d937f));
|
|
24
|
+
--_bg-color-outline-variant: var(--md-sys-color-outline-variant, light-dark(#c3c9b3, #434938));
|
|
25
|
+
--_bg-color-shadow: var(--md-sys-color-shadow, light-dark(#000000, #000000));
|
|
26
|
+
--_bg-color-scrim: var(--md-sys-color-scrim, light-dark(#000000, #000000));
|
|
27
|
+
--_bg-color-surface-tint: var(--md-sys-color-surface-tint, light-dark(#446900, #a3d656));
|
|
28
|
+
--_bg-color-primary: var(--md-sys-color-primary, light-dark(#000000, #ffffff));
|
|
29
|
+
--_bg-color-on-primary: var(--md-sys-color-on-primary, light-dark(#bef36f, #111f00));
|
|
30
|
+
--_bg-color-primary-container: var(--md-sys-color-primary-container, light-dark(#2a4200, #b0e563));
|
|
31
|
+
--_bg-color-on-primary-container: var(--md-sys-color-on-primary-container, light-dark(#ffffff, #000000));
|
|
32
|
+
--_bg-color-inverse-primary: var(--md-sys-color-inverse-primary, light-dark(#a3d656, #446900));
|
|
33
|
+
--_bg-color-secondary: var(--md-sys-color-secondary, light-dark(#516533, #b7cf93));
|
|
34
|
+
--_bg-color-on-secondary: var(--md-sys-color-on-secondary, light-dark(#ffffff, #111f00));
|
|
35
|
+
--_bg-color-secondary-container: var(--md-sys-color-secondary-container, light-dark(#c5dda0, #3a4d1e));
|
|
36
|
+
--_bg-color-on-secondary-container: var(--md-sys-color-on-secondary-container, light-dark(#111f00, #d3ebad));
|
|
37
|
+
--_bg-color-tertiary: var(--md-sys-color-tertiary, light-dark(#00452e, #8df7c5));
|
|
38
|
+
--_bg-color-on-tertiary: var(--md-sys-color-on-tertiary, light-dark(#8df7c5, #002114));
|
|
39
|
+
--_bg-color-tertiary-container: var(--md-sys-color-tertiary-container, light-dark(#00855c, #33a376));
|
|
40
|
+
--_bg-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container, light-dark(#ffffff, #000000));
|
|
41
|
+
--_bg-color-error: var(--md-sys-color-error, light-dark(#ba1a1a, #ffb4ab));
|
|
42
|
+
--_bg-color-on-error: var(--md-sys-color-on-error, light-dark(#ffffff, #690005));
|
|
43
|
+
--_bg-color-error-container: var(--md-sys-color-error-container, light-dark(#ffdad6, #93000a));
|
|
44
|
+
--_bg-color-on-error-container: var(--md-sys-color-on-error-container, light-dark(#410002, #ffdad6));
|
|
45
|
+
--_bg-color-primary-fixed: var(--md-sys-color-primary-fixed, light-dark(#446900, #446900));
|
|
46
|
+
--_bg-color-primary-fixed-dim: var(--md-sys-color-primary-fixed-dim, light-dark(#324f00, #324f00));
|
|
47
|
+
--_bg-color-on-primary-fixed: var(--md-sys-color-on-primary-fixed, light-dark(#ffffff, #ffffff));
|
|
48
|
+
--_bg-color-on-primary-fixed-variant: var(--md-sys-color-on-primary-fixed-variant, light-dark(#bef36f, #bef36f));
|
|
49
|
+
--_bg-color-secondary-fixed: var(--md-sys-color-secondary-fixed, light-dark(#b7cf93, #b7cf93));
|
|
50
|
+
--_bg-color-secondary-fixed-dim: var(--md-sys-color-secondary-fixed-dim, light-dark(#9db37a, #9db37a));
|
|
51
|
+
--_bg-color-on-secondary-fixed: var(--md-sys-color-on-secondary-fixed, light-dark(#111f00, #111f00));
|
|
52
|
+
--_bg-color-on-secondary-fixed-variant: var(--md-sys-color-on-secondary-fixed-variant, light-dark(#2f4114, #2f4114));
|
|
53
|
+
--_bg-color-tertiary-fixed: var(--md-sys-color-tertiary-fixed, light-dark(#006c4a, #006c4a));
|
|
54
|
+
--_bg-color-tertiary-fixed-dim: var(--md-sys-color-tertiary-fixed-dim, light-dark(#005237, #005237));
|
|
55
|
+
--_bg-color-on-tertiary-fixed: var(--md-sys-color-on-tertiary-fixed, light-dark(#ffffff, #ffffff));
|
|
56
|
+
--_bg-color-on-tertiary-fixed-variant: var(--md-sys-color-on-tertiary-fixed-variant, light-dark(#8df7c5, #8df7c5));
|
|
57
57
|
}
|
|
58
58
|
}
|
|
59
59
|
|
|
60
|
-
@layer material-design-system.
|
|
60
|
+
@layer material-design-system.bg-color {
|
|
61
61
|
.bg-primary-palette-key-color {
|
|
62
62
|
background: var(--_bg-color-primary-palette-key-color);
|
|
63
63
|
}
|
|
@@ -273,4 +273,4 @@
|
|
|
273
273
|
.bg-on-tertiary-fixed-variant {
|
|
274
274
|
background: var(--_bg-color-on-tertiary-fixed-variant);
|
|
275
275
|
}
|
|
276
|
-
}
|
|
276
|
+
}
|
package/color/text-utilities.css
CHANGED
|
@@ -1,63 +1,63 @@
|
|
|
1
|
-
@layer material-design-system.
|
|
1
|
+
@layer material-design-system.text-color {
|
|
2
2
|
:root {
|
|
3
|
-
--_text-color-primary-palette-key-color
|
|
4
|
-
--_text-color-secondary-palette-key-color
|
|
5
|
-
--_text-color-tertiary-palette-key-color
|
|
6
|
-
--_text-color-neutral-palette-key-color
|
|
3
|
+
--_text-color-primary-palette-key-color: var(--md-sys-color-primary-palette-key-color, light-dark(#578400, #578400));
|
|
4
|
+
--_text-color-secondary-palette-key-color: var(--md-sys-color-secondary-palette-key-color, light-dark(#697e4a, #697e4a));
|
|
5
|
+
--_text-color-tertiary-palette-key-color: var(--md-sys-color-tertiary-palette-key-color, light-dark(#00885e, #00885e));
|
|
6
|
+
--_text-color-neutral-palette-key-color: var(--md-sys-color-neutral-palette-key-color, light-dark(#75786c, #75786c));
|
|
7
7
|
--_text-color-neutral-variant-palette-key-color: var(--md-sys-color-neutral-variant-palette-key-color, light-dark(#737966, #737966));
|
|
8
|
-
--_text-color-background
|
|
9
|
-
--_text-color-on-background
|
|
10
|
-
--_text-color-surface
|
|
11
|
-
--_text-color-surface-dim
|
|
12
|
-
--_text-color-surface-bright
|
|
13
|
-
--_text-color-surface-container-lowest
|
|
14
|
-
--_text-color-surface-container-low
|
|
15
|
-
--_text-color-surface-container
|
|
16
|
-
--_text-color-surface-container-high
|
|
17
|
-
--_text-color-surface-container-highest
|
|
18
|
-
--_text-color-on-surface
|
|
19
|
-
--_text-color-surface-variant
|
|
20
|
-
--_text-color-on-surface-variant
|
|
21
|
-
--_text-color-inverse-surface
|
|
22
|
-
--_text-color-inverse-on-surface
|
|
23
|
-
--_text-color-outline
|
|
24
|
-
--_text-color-outline-variant
|
|
25
|
-
--_text-color-shadow
|
|
26
|
-
--_text-color-scrim
|
|
27
|
-
--_text-color-surface-tint
|
|
28
|
-
--_text-color-primary
|
|
29
|
-
--_text-color-on-primary
|
|
30
|
-
--_text-color-primary-container
|
|
31
|
-
--_text-color-on-primary-container
|
|
32
|
-
--_text-color-inverse-primary
|
|
33
|
-
--_text-color-secondary
|
|
34
|
-
--_text-color-on-secondary
|
|
35
|
-
--_text-color-secondary-container
|
|
36
|
-
--_text-color-on-secondary-container
|
|
37
|
-
--_text-color-tertiary
|
|
38
|
-
--_text-color-on-tertiary
|
|
39
|
-
--_text-color-tertiary-container
|
|
40
|
-
--_text-color-on-tertiary-container
|
|
41
|
-
--_text-color-error
|
|
42
|
-
--_text-color-on-error
|
|
43
|
-
--_text-color-error-container
|
|
44
|
-
--_text-color-on-error-container
|
|
45
|
-
--_text-color-primary-fixed
|
|
46
|
-
--_text-color-primary-fixed-dim
|
|
47
|
-
--_text-color-on-primary-fixed
|
|
48
|
-
--_text-color-on-primary-fixed-variant
|
|
49
|
-
--_text-color-secondary-fixed
|
|
50
|
-
--_text-color-secondary-fixed-dim
|
|
51
|
-
--_text-color-on-secondary-fixed
|
|
52
|
-
--_text-color-on-secondary-fixed-variant
|
|
53
|
-
--_text-color-tertiary-fixed
|
|
54
|
-
--_text-color-tertiary-fixed-dim
|
|
55
|
-
--_text-color-on-tertiary-fixed
|
|
56
|
-
--_text-color-on-tertiary-fixed-variant
|
|
8
|
+
--_text-color-background: var(--md-sys-color-background, light-dark(#f9fbec, #11140c));
|
|
9
|
+
--_text-color-on-background: var(--md-sys-color-on-background, light-dark(#1a1d14, #e2e4d5));
|
|
10
|
+
--_text-color-surface: var(--md-sys-color-surface, light-dark(#f9fbec, #11140c));
|
|
11
|
+
--_text-color-surface-dim: var(--md-sys-color-surface-dim, light-dark(#d9dbcd, #11140c));
|
|
12
|
+
--_text-color-surface-bright: var(--md-sys-color-surface-bright, light-dark(#f9fbec, #373a30));
|
|
13
|
+
--_text-color-surface-container-lowest: var(--md-sys-color-surface-container-lowest, light-dark(#ffffff, #0c0f07));
|
|
14
|
+
--_text-color-surface-container-low: var(--md-sys-color-surface-container-low, light-dark(#f3f5e6, #1a1d14));
|
|
15
|
+
--_text-color-surface-container: var(--md-sys-color-surface-container, light-dark(#edefe1, #1e2118));
|
|
16
|
+
--_text-color-surface-container-high: var(--md-sys-color-surface-container-high, light-dark(#e7e9db, #282b22));
|
|
17
|
+
--_text-color-surface-container-highest: var(--md-sys-color-surface-container-highest, light-dark(#e2e4d5, #33362c));
|
|
18
|
+
--_text-color-on-surface: var(--md-sys-color-on-surface, light-dark(#1a1d14, #e2e4d5));
|
|
19
|
+
--_text-color-surface-variant: var(--md-sys-color-surface-variant, light-dark(#dfe5cf, #434938));
|
|
20
|
+
--_text-color-on-surface-variant: var(--md-sys-color-on-surface-variant, light-dark(#434938, #c3c9b3));
|
|
21
|
+
--_text-color-inverse-surface: var(--md-sys-color-inverse-surface, light-dark(#2e3228, #e2e4d5));
|
|
22
|
+
--_text-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface, light-dark(#f0f2e3, #2e3228));
|
|
23
|
+
--_text-color-outline: var(--md-sys-color-outline, light-dark(#737967, #8d937f));
|
|
24
|
+
--_text-color-outline-variant: var(--md-sys-color-outline-variant, light-dark(#c3c9b3, #434938));
|
|
25
|
+
--_text-color-shadow: var(--md-sys-color-shadow, light-dark(#000000, #000000));
|
|
26
|
+
--_text-color-scrim: var(--md-sys-color-scrim, light-dark(#000000, #000000));
|
|
27
|
+
--_text-color-surface-tint: var(--md-sys-color-surface-tint, light-dark(#446900, #a3d656));
|
|
28
|
+
--_text-color-primary: var(--md-sys-color-primary, light-dark(#000000, #ffffff));
|
|
29
|
+
--_text-color-on-primary: var(--md-sys-color-on-primary, light-dark(#bef36f, #111f00));
|
|
30
|
+
--_text-color-primary-container: var(--md-sys-color-primary-container, light-dark(#2a4200, #b0e563));
|
|
31
|
+
--_text-color-on-primary-container: var(--md-sys-color-on-primary-container, light-dark(#ffffff, #000000));
|
|
32
|
+
--_text-color-inverse-primary: var(--md-sys-color-inverse-primary, light-dark(#a3d656, #446900));
|
|
33
|
+
--_text-color-secondary: var(--md-sys-color-secondary, light-dark(#516533, #b7cf93));
|
|
34
|
+
--_text-color-on-secondary: var(--md-sys-color-on-secondary, light-dark(#ffffff, #111f00));
|
|
35
|
+
--_text-color-secondary-container: var(--md-sys-color-secondary-container, light-dark(#c5dda0, #3a4d1e));
|
|
36
|
+
--_text-color-on-secondary-container: var(--md-sys-color-on-secondary-container, light-dark(#111f00, #d3ebad));
|
|
37
|
+
--_text-color-tertiary: var(--md-sys-color-tertiary, light-dark(#00452e, #8df7c5));
|
|
38
|
+
--_text-color-on-tertiary: var(--md-sys-color-on-tertiary, light-dark(#8df7c5, #002114));
|
|
39
|
+
--_text-color-tertiary-container: var(--md-sys-color-tertiary-container, light-dark(#00855c, #33a376));
|
|
40
|
+
--_text-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container, light-dark(#ffffff, #000000));
|
|
41
|
+
--_text-color-error: var(--md-sys-color-error, light-dark(#ba1a1a, #ffb4ab));
|
|
42
|
+
--_text-color-on-error: var(--md-sys-color-on-error, light-dark(#ffffff, #690005));
|
|
43
|
+
--_text-color-error-container: var(--md-sys-color-error-container, light-dark(#ffdad6, #93000a));
|
|
44
|
+
--_text-color-on-error-container: var(--md-sys-color-on-error-container, light-dark(#410002, #ffdad6));
|
|
45
|
+
--_text-color-primary-fixed: var(--md-sys-color-primary-fixed, light-dark(#446900, #446900));
|
|
46
|
+
--_text-color-primary-fixed-dim: var(--md-sys-color-primary-fixed-dim, light-dark(#324f00, #324f00));
|
|
47
|
+
--_text-color-on-primary-fixed: var(--md-sys-color-on-primary-fixed, light-dark(#ffffff, #ffffff));
|
|
48
|
+
--_text-color-on-primary-fixed-variant: var(--md-sys-color-on-primary-fixed-variant, light-dark(#bef36f, #bef36f));
|
|
49
|
+
--_text-color-secondary-fixed: var(--md-sys-color-secondary-fixed, light-dark(#b7cf93, #b7cf93));
|
|
50
|
+
--_text-color-secondary-fixed-dim: var(--md-sys-color-secondary-fixed-dim, light-dark(#9db37a, #9db37a));
|
|
51
|
+
--_text-color-on-secondary-fixed: var(--md-sys-color-on-secondary-fixed, light-dark(#111f00, #111f00));
|
|
52
|
+
--_text-color-on-secondary-fixed-variant: var(--md-sys-color-on-secondary-fixed-variant, light-dark(#2f4114, #2f4114));
|
|
53
|
+
--_text-color-tertiary-fixed: var(--md-sys-color-tertiary-fixed, light-dark(#006c4a, #006c4a));
|
|
54
|
+
--_text-color-tertiary-fixed-dim: var(--md-sys-color-tertiary-fixed-dim, light-dark(#005237, #005237));
|
|
55
|
+
--_text-color-on-tertiary-fixed: var(--md-sys-color-on-tertiary-fixed, light-dark(#ffffff, #ffffff));
|
|
56
|
+
--_text-color-on-tertiary-fixed-variant: var(--md-sys-color-on-tertiary-fixed-variant, light-dark(#8df7c5, #8df7c5));
|
|
57
57
|
}
|
|
58
58
|
}
|
|
59
59
|
|
|
60
|
-
@layer material-design-system.
|
|
60
|
+
@layer material-design-system.text-color {
|
|
61
61
|
.text-primary-palette-key-color {
|
|
62
62
|
color: var(--_text-color-primary-palette-key-color);
|
|
63
63
|
}
|
|
@@ -273,4 +273,4 @@
|
|
|
273
273
|
.text-on-tertiary-fixed-variant {
|
|
274
274
|
color: var(--_text-color-on-tertiary-fixed-variant);
|
|
275
275
|
}
|
|
276
|
-
}
|
|
276
|
+
}
|