@diskette/palette 0.7.0 → 0.8.0

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.
Files changed (142) hide show
  1. package/README.md +1 -0
  2. package/dist/colors/amber.d.ts +118 -0
  3. package/dist/colors/amber.js +117 -0
  4. package/dist/colors/black-alpha.d.ts +31 -0
  5. package/dist/colors/black-alpha.js +30 -0
  6. package/dist/colors/blue.d.ts +118 -0
  7. package/dist/colors/blue.js +117 -0
  8. package/dist/colors/bronze.d.ts +118 -0
  9. package/dist/colors/bronze.js +117 -0
  10. package/dist/colors/brown.d.ts +118 -0
  11. package/dist/colors/brown.js +117 -0
  12. package/dist/colors/crimson.d.ts +118 -0
  13. package/dist/colors/crimson.js +117 -0
  14. package/dist/colors/cyan.d.ts +118 -0
  15. package/dist/colors/cyan.js +117 -0
  16. package/dist/colors/gold.d.ts +118 -0
  17. package/dist/colors/gold.js +117 -0
  18. package/dist/colors/grass.d.ts +118 -0
  19. package/dist/colors/grass.js +117 -0
  20. package/dist/colors/gray.d.ts +118 -0
  21. package/dist/colors/gray.js +117 -0
  22. package/dist/colors/green.d.ts +118 -0
  23. package/dist/colors/green.js +117 -0
  24. package/dist/colors/index.d.ts +33 -0
  25. package/dist/colors/index.js +33 -0
  26. package/dist/colors/indigo.d.ts +118 -0
  27. package/dist/colors/indigo.js +117 -0
  28. package/dist/colors/iris.d.ts +118 -0
  29. package/dist/colors/iris.js +117 -0
  30. package/dist/colors/jade.d.ts +118 -0
  31. package/dist/colors/jade.js +117 -0
  32. package/dist/colors/lime.d.ts +118 -0
  33. package/dist/colors/lime.js +117 -0
  34. package/dist/colors/mauve.d.ts +118 -0
  35. package/dist/colors/mauve.js +117 -0
  36. package/dist/colors/mint.d.ts +118 -0
  37. package/dist/colors/mint.js +117 -0
  38. package/dist/colors/olive.d.ts +118 -0
  39. package/dist/colors/olive.js +117 -0
  40. package/dist/colors/orange.d.ts +118 -0
  41. package/dist/colors/orange.js +117 -0
  42. package/dist/colors/pink.d.ts +118 -0
  43. package/dist/colors/pink.js +117 -0
  44. package/dist/colors/plum.d.ts +118 -0
  45. package/dist/colors/plum.js +117 -0
  46. package/dist/colors/purple.d.ts +118 -0
  47. package/dist/colors/purple.js +117 -0
  48. package/dist/colors/red.d.ts +118 -0
  49. package/dist/colors/red.js +117 -0
  50. package/dist/colors/ruby.d.ts +118 -0
  51. package/dist/colors/ruby.js +117 -0
  52. package/dist/colors/sage.d.ts +118 -0
  53. package/dist/colors/sage.js +117 -0
  54. package/dist/colors/sand.d.ts +118 -0
  55. package/dist/colors/sand.js +117 -0
  56. package/dist/colors/sky.d.ts +118 -0
  57. package/dist/colors/sky.js +117 -0
  58. package/dist/colors/slate.d.ts +118 -0
  59. package/dist/colors/slate.js +117 -0
  60. package/dist/colors/teal.d.ts +118 -0
  61. package/dist/colors/teal.js +117 -0
  62. package/dist/colors/tomato.d.ts +118 -0
  63. package/dist/colors/tomato.js +117 -0
  64. package/dist/colors/violet.d.ts +118 -0
  65. package/dist/colors/violet.js +117 -0
  66. package/dist/colors/white-alpha.d.ts +31 -0
  67. package/dist/colors/white-alpha.js +30 -0
  68. package/dist/colors/yellow.d.ts +118 -0
  69. package/dist/colors/yellow.js +117 -0
  70. package/dist/index.d.ts +3601 -0
  71. package/dist/index.js +67 -0
  72. package/dist/lib.d.ts +30 -0
  73. package/dist/lib.js +87 -0
  74. package/dist/types.d.ts +23 -0
  75. package/dist/{colors.js → types.js} +0 -1
  76. package/package.json +7 -6
  77. package/dist/accents.css +0 -63
  78. package/dist/amber-accents.css +0 -32
  79. package/dist/amber-p3.css +0 -95
  80. package/dist/black-alpha.css +0 -29
  81. package/dist/blue-accents.css +0 -32
  82. package/dist/blue-p3.css +0 -95
  83. package/dist/bronze-accents.css +0 -32
  84. package/dist/bronze-p3.css +0 -95
  85. package/dist/brown-accents.css +0 -32
  86. package/dist/brown-p3.css +0 -95
  87. package/dist/colors.d.ts +0 -6
  88. package/dist/crimson-accents.css +0 -32
  89. package/dist/crimson-p3.css +0 -95
  90. package/dist/cyan-accents.css +0 -32
  91. package/dist/cyan-p3.css +0 -95
  92. package/dist/gold-accents.css +0 -32
  93. package/dist/gold-p3.css +0 -95
  94. package/dist/grass-accents.css +0 -32
  95. package/dist/grass-p3.css +0 -95
  96. package/dist/gray-accents.css +0 -32
  97. package/dist/gray-p3.css +0 -95
  98. package/dist/green-accents.css +0 -32
  99. package/dist/green-p3.css +0 -95
  100. package/dist/indigo-accents.css +0 -32
  101. package/dist/indigo-p3.css +0 -95
  102. package/dist/iris-accents.css +0 -32
  103. package/dist/iris-p3.css +0 -95
  104. package/dist/jade-accents.css +0 -32
  105. package/dist/jade-p3.css +0 -95
  106. package/dist/lime-accents.css +0 -32
  107. package/dist/lime-p3.css +0 -95
  108. package/dist/mauve-accents.css +0 -65
  109. package/dist/mauve-p3.css +0 -95
  110. package/dist/mint-accents.css +0 -32
  111. package/dist/mint-p3.css +0 -95
  112. package/dist/olive-accents.css +0 -65
  113. package/dist/olive-p3.css +0 -95
  114. package/dist/orange-accents.css +0 -32
  115. package/dist/orange-p3.css +0 -95
  116. package/dist/pink-accents.css +0 -32
  117. package/dist/pink-p3.css +0 -95
  118. package/dist/plum-accents.css +0 -32
  119. package/dist/plum-p3.css +0 -95
  120. package/dist/purple-accents.css +0 -32
  121. package/dist/purple-p3.css +0 -95
  122. package/dist/red-accents.css +0 -32
  123. package/dist/red-p3.css +0 -95
  124. package/dist/ruby-accents.css +0 -32
  125. package/dist/ruby-p3.css +0 -95
  126. package/dist/sage-accents.css +0 -65
  127. package/dist/sage-p3.css +0 -95
  128. package/dist/sand-accents.css +0 -65
  129. package/dist/sand-p3.css +0 -95
  130. package/dist/sky-accents.css +0 -32
  131. package/dist/sky-p3.css +0 -95
  132. package/dist/slate-accents.css +0 -65
  133. package/dist/slate-p3.css +0 -95
  134. package/dist/teal-accents.css +0 -32
  135. package/dist/teal-p3.css +0 -95
  136. package/dist/tomato-accents.css +0 -32
  137. package/dist/tomato-p3.css +0 -95
  138. package/dist/violet-accents.css +0 -32
  139. package/dist/violet-p3.css +0 -95
  140. package/dist/white-alpha.css +0 -29
  141. package/dist/yellow-accents.css +0 -32
  142. package/dist/yellow-p3.css +0 -95
package/dist/index.js ADDED
@@ -0,0 +1,67 @@
1
+ import amber from "./colors/amber.js";
2
+ import blue from "./colors/blue.js";
3
+ import bronze from "./colors/bronze.js";
4
+ import brown from "./colors/brown.js";
5
+ import crimson from "./colors/crimson.js";
6
+ import cyan from "./colors/cyan.js";
7
+ import gold from "./colors/gold.js";
8
+ import grass from "./colors/grass.js";
9
+ import gray from "./colors/gray.js";
10
+ import green from "./colors/green.js";
11
+ import indigo from "./colors/indigo.js";
12
+ import iris from "./colors/iris.js";
13
+ import jade from "./colors/jade.js";
14
+ import lime from "./colors/lime.js";
15
+ import mauve from "./colors/mauve.js";
16
+ import mint from "./colors/mint.js";
17
+ import olive from "./colors/olive.js";
18
+ import orange from "./colors/orange.js";
19
+ import pink from "./colors/pink.js";
20
+ import plum from "./colors/plum.js";
21
+ import purple from "./colors/purple.js";
22
+ import red from "./colors/red.js";
23
+ import ruby from "./colors/ruby.js";
24
+ import sage from "./colors/sage.js";
25
+ import sand from "./colors/sand.js";
26
+ import sky from "./colors/sky.js";
27
+ import slate from "./colors/slate.js";
28
+ import teal from "./colors/teal.js";
29
+ import tomato from "./colors/tomato.js";
30
+ import violet from "./colors/violet.js";
31
+ import yellow from "./colors/yellow.js";
32
+ export const colors = [
33
+ amber,
34
+ blue,
35
+ bronze,
36
+ brown,
37
+ crimson,
38
+ cyan,
39
+ gold,
40
+ grass,
41
+ gray,
42
+ green,
43
+ indigo,
44
+ iris,
45
+ jade,
46
+ lime,
47
+ mauve,
48
+ mint,
49
+ olive,
50
+ orange,
51
+ pink,
52
+ plum,
53
+ purple,
54
+ red,
55
+ ruby,
56
+ sage,
57
+ sand,
58
+ sky,
59
+ slate,
60
+ teal,
61
+ tomato,
62
+ violet,
63
+ yellow,
64
+ ];
65
+ export default colors;
66
+ export { accentColors, grayColors } from "./types.js";
67
+ export { css } from "./lib.js";
package/dist/lib.d.ts ADDED
@@ -0,0 +1,30 @@
1
+ export type AlphaConfig = {
2
+ srgb: Record<string, string>;
3
+ p3: Record<string, string>;
4
+ };
5
+ export type ColorConfig = {
6
+ srgb: {
7
+ light: Record<string, string> & {
8
+ surface: string;
9
+ };
10
+ dark: Record<string, string> & {
11
+ surface: string;
12
+ };
13
+ };
14
+ p3: {
15
+ light: Record<string, string> & {
16
+ surface: string;
17
+ };
18
+ dark: Record<string, string> & {
19
+ surface: string;
20
+ };
21
+ };
22
+ contrast: string;
23
+ indicator: string;
24
+ track: string;
25
+ };
26
+ export declare const css: {
27
+ scale(scheme: "light" | "lightAlpha" | "dark" | "darkAlpha", config: ColorConfig): string;
28
+ alpha(config: AlphaConfig): string;
29
+ semantic(name: string, config: ColorConfig): string;
30
+ };
package/dist/lib.js ADDED
@@ -0,0 +1,87 @@
1
+ const lightSelector = `:root, .light, .light-theme`;
2
+ const darkSelector = `.dark, .dark-theme`;
3
+ export const css = {
4
+ scale(scheme, config) {
5
+ const isLight = scheme === 'light' || scheme === 'lightAlpha';
6
+ const isAlpha = scheme === 'lightAlpha' || scheme === 'darkAlpha';
7
+ const selector = isLight ? lightSelector : darkSelector;
8
+ const srgbScale = isLight ? config.srgb.light : config.srgb.dark;
9
+ const p3Scale = isLight ? config.p3.light : config.p3.dark;
10
+ const filterEntries = (obj) => Object.entries(obj).filter(([key]) => {
11
+ if (key === 'surface')
12
+ return false;
13
+ const hasAlpha = key.includes('A');
14
+ return isAlpha ? hasAlpha : !hasAlpha;
15
+ });
16
+ const baseVars = filterEntries(srgbScale)
17
+ .map(([key, value]) => ` ${key}: ${value};`)
18
+ .join('\n');
19
+ const p3Vars = filterEntries(p3Scale)
20
+ .map(([key, value]) => ` ${key}: ${value};`)
21
+ .join('\n');
22
+ return `${selector} {
23
+ ${baseVars}
24
+ }
25
+
26
+ @supports (color: color(display-p3 1 1 1)) {
27
+ @media (color-gamut: p3) {
28
+ ${selector} {
29
+ ${p3Vars}
30
+ }
31
+ }
32
+ }
33
+ `;
34
+ },
35
+ alpha(config) {
36
+ const baseVars = Object.entries(config.srgb)
37
+ .map(([key, value]) => ` ${key}: ${value};`)
38
+ .join('\n');
39
+ const p3Vars = Object.entries(config.p3)
40
+ .map(([key, value]) => ` ${key}: ${value};`)
41
+ .join('\n');
42
+ return `:root {
43
+ ${baseVars}
44
+ }
45
+
46
+ @supports (color: color(display-p3 1 1 1)) {
47
+ @media (color-gamut: p3) {
48
+ :root {
49
+ ${p3Vars}
50
+ }
51
+ }
52
+ }
53
+ `;
54
+ },
55
+ semantic(name, config) {
56
+ const varRef = (key) => `var(--${key.replace(/(\d+)$/, '-$1')})`;
57
+ return `:root {
58
+ --${name}-contrast: ${config.contrast};
59
+ }
60
+
61
+ :root,
62
+ .light,
63
+ .light-theme {
64
+ --${name}-surface: ${config.srgb.light.surface};
65
+ --${name}-indicator: ${varRef(config.indicator)};
66
+ --${name}-track: ${varRef(config.track)};
67
+ @supports (color: color(display-p3 1 1 1)) {
68
+ @media (color-gamut: p3) {
69
+ --${name}-surface: ${config.p3.light.surface};
70
+ }
71
+ }
72
+ }
73
+
74
+ .dark,
75
+ .dark-theme {
76
+ --${name}-surface: ${config.srgb.dark.surface};
77
+ --${name}-indicator: ${varRef(config.indicator)};
78
+ --${name}-track: ${varRef(config.track)};
79
+ @supports (color: color(display-p3 1 1 1)) {
80
+ @media (color-gamut: p3) {
81
+ --${name}-surface: ${config.p3.dark.surface};
82
+ }
83
+ }
84
+ }
85
+ `;
86
+ },
87
+ };
@@ -0,0 +1,23 @@
1
+ export declare const grayColors: readonly ["gray", "mauve", "slate", "sage", "olive", "sand"];
2
+ export type GrayColor = (typeof grayColors)[number];
3
+ export declare const accentColors: readonly ["gray", "gold", "bronze", "brown", "yellow", "amber", "orange", "tomato", "red", "ruby", "crimson", "pink", "plum", "purple", "violet", "iris", "indigo", "blue", "cyan", "teal", "jade", "green", "grass", "lime", "mint", "sky"];
4
+ export type AccentColor = (typeof accentColors)[number];
5
+ export type Color = AccentColor | GrayColor;
6
+ type ScaleStep = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
7
+ export type ColorScale<C extends Color> = {
8
+ [K in `${C}${ScaleStep}` | `${C}A${ScaleStep}` | 'surface']: string;
9
+ };
10
+ export type ColorPalette<C extends Color> = {
11
+ srgb: {
12
+ light: ColorScale<C>;
13
+ dark: ColorScale<C>;
14
+ };
15
+ p3: {
16
+ light: ColorScale<C>;
17
+ dark: ColorScale<C>;
18
+ };
19
+ contrast: string;
20
+ indicator: string;
21
+ track: string;
22
+ };
23
+ export {};
@@ -34,4 +34,3 @@ export const accentColors = [
34
34
  'mint',
35
35
  'sky',
36
36
  ];
37
- export const colors = [...accentColors, ...grayColors.slice(1)];
package/package.json CHANGED
@@ -1,10 +1,11 @@
1
1
  {
2
2
  "name": "@diskette/palette",
3
3
  "type": "module",
4
- "version": "0.7.0",
4
+ "version": "0.8.0",
5
5
  "exports": {
6
6
  ".": "./dist/colors.js",
7
- "./*.css": "./dist/*.css"
7
+ "./colors": "./dist/colors/index.js",
8
+ "./colors/*": "./dist/colors/*.js"
8
9
  },
9
10
  "files": [
10
11
  "dist"
@@ -16,7 +17,8 @@
16
17
  "oxlint-tsgolint": "^0.2.0",
17
18
  "prettier": "^3.6.2",
18
19
  "tsx": "^4.20.5",
19
- "typescript": "^5.9.2"
20
+ "typescript": "^5.9.2",
21
+ "vitest": "^4.0.14"
20
22
  },
21
23
  "repository": {
22
24
  "type": "git",
@@ -29,10 +31,9 @@
29
31
  },
30
32
  "license": "MIT",
31
33
  "scripts": {
32
- "build": "rm -rf dist && pnpm build:js && pnpm build:css",
33
- "build:js": "tsc -p tsconfig.build.json",
34
- "build:css": "tsx --no-warnings=ExperimentalWarning scripts/build.ts",
34
+ "build": "rm -rf dist && tsc -p tsconfig.build.json",
35
35
  "typecheck": "tsc",
36
+ "test": "vitest run",
36
37
  "lint": "oxlint --type-aware src",
37
38
  "release": "changeset version && changeset publish && git push --follow-tags"
38
39
  }
package/dist/accents.css DELETED
@@ -1,63 +0,0 @@
1
- @theme inline static {
2
- --color-accent-1: var(--accent-1);
3
- --color-accent-2: var(--accent-2);
4
- --color-accent-3: var(--accent-3);
5
- --color-accent-4: var(--accent-4);
6
- --color-accent-5: var(--accent-5);
7
- --color-accent-6: var(--accent-6);
8
- --color-accent-7: var(--accent-7);
9
- --color-accent-8: var(--accent-8);
10
- --color-accent-9: var(--accent-9);
11
- --color-accent-10: var(--accent-10);
12
- --color-accent-11: var(--accent-11);
13
- --color-accent-12: var(--accent-12);
14
-
15
- --color-accent-a1: var(--accent-a1);
16
- --color-accent-a2: var(--accent-a2);
17
- --color-accent-a3: var(--accent-a3);
18
- --color-accent-a4: var(--accent-a4);
19
- --color-accent-a5: var(--accent-a5);
20
- --color-accent-a6: var(--accent-a6);
21
- --color-accent-a7: var(--accent-a7);
22
- --color-accent-a8: var(--accent-a8);
23
- --color-accent-a9: var(--accent-a9);
24
- --color-accent-a10: var(--accent-a10);
25
- --color-accent-a11: var(--accent-a11);
26
- --color-accent-a12: var(--accent-a12);
27
-
28
- --color-accent-contrast: var(--accent-contrast);
29
- --color-accent-surface: var(--accent-surface);
30
- --color-accent-indicator: var(--accent-indicator);
31
- --color-accent-track: var(--accent-track);
32
-
33
- --color-gray-1: var(--gray-1);
34
- --color-gray-2: var(--gray-2);
35
- --color-gray-3: var(--gray-3);
36
- --color-gray-4: var(--gray-4);
37
- --color-gray-5: var(--gray-5);
38
- --color-gray-6: var(--gray-6);
39
- --color-gray-7: var(--gray-7);
40
- --color-gray-8: var(--gray-8);
41
- --color-gray-9: var(--gray-9);
42
- --color-gray-10: var(--gray-10);
43
- --color-gray-11: var(--gray-11);
44
- --color-gray-12: var(--gray-12);
45
-
46
- --color-gray-a1: var(--gray-a1);
47
- --color-gray-a2: var(--gray-a2);
48
- --color-gray-a3: var(--gray-a3);
49
- --color-gray-a4: var(--gray-a4);
50
- --color-gray-a5: var(--gray-a5);
51
- --color-gray-a6: var(--gray-a6);
52
- --color-gray-a7: var(--gray-a7);
53
- --color-gray-a8: var(--gray-a8);
54
- --color-gray-a9: var(--gray-a9);
55
- --color-gray-a10: var(--gray-a10);
56
- --color-gray-a11: var(--gray-a11);
57
- --color-gray-a12: var(--gray-a12);
58
-
59
- --color-gray-contrast: var(--gray-contrast);
60
- --color-gray-surface: var(--gray-surface);
61
- --color-gray-indicator: var(--gray-indicator);
62
- --color-gray-track: var(--gray-track);
63
- }
@@ -1,32 +0,0 @@
1
- [data-accent-color='amber'] {
2
- --accent-1: var(--amber-1);
3
- --accent-2: var(--amber-2);
4
- --accent-3: var(--amber-3);
5
- --accent-4: var(--amber-4);
6
- --accent-5: var(--amber-5);
7
- --accent-6: var(--amber-6);
8
- --accent-7: var(--amber-7);
9
- --accent-8: var(--amber-8);
10
- --accent-9: var(--amber-9);
11
- --accent-10: var(--amber-10);
12
- --accent-11: var(--amber-11);
13
- --accent-12: var(--amber-12);
14
-
15
- --accent-a1: var(--amber-a1);
16
- --accent-a2: var(--amber-a2);
17
- --accent-a3: var(--amber-a3);
18
- --accent-a4: var(--amber-a4);
19
- --accent-a5: var(--amber-a5);
20
- --accent-a6: var(--amber-a6);
21
- --accent-a7: var(--amber-a7);
22
- --accent-a8: var(--amber-a8);
23
- --accent-a9: var(--amber-a9);
24
- --accent-a10: var(--amber-a10);
25
- --accent-a11: var(--amber-a11);
26
- --accent-a12: var(--amber-a12);
27
-
28
- --accent-contrast: var(--amber-contrast);
29
- --accent-surface: var(--amber-surface);
30
- --accent-indicator: var(--amber-indicator);
31
- --accent-track: var(--amber-track);
32
- }
package/dist/amber-p3.css DELETED
@@ -1,95 +0,0 @@
1
- @theme inline static {
2
- --color-amber-1: var(--amber-1);
3
- --color-amber-2: var(--amber-2);
4
- --color-amber-3: var(--amber-3);
5
- --color-amber-4: var(--amber-4);
6
- --color-amber-5: var(--amber-5);
7
- --color-amber-6: var(--amber-6);
8
- --color-amber-7: var(--amber-7);
9
- --color-amber-8: var(--amber-8);
10
- --color-amber-9: var(--amber-9);
11
- --color-amber-10: var(--amber-10);
12
- --color-amber-11: var(--amber-11);
13
- --color-amber-12: var(--amber-12);
14
-
15
- --color-amber-a1: var(--amber-a1);
16
- --color-amber-a2: var(--amber-a2);
17
- --color-amber-a3: var(--amber-a3);
18
- --color-amber-a4: var(--amber-a4);
19
- --color-amber-a5: var(--amber-a5);
20
- --color-amber-a6: var(--amber-a6);
21
- --color-amber-a7: var(--amber-a7);
22
- --color-amber-a8: var(--amber-a8);
23
- --color-amber-a9: var(--amber-a9);
24
- --color-amber-a10: var(--amber-a10);
25
- --color-amber-a11: var(--amber-a11);
26
- --color-amber-a12: var(--amber-a12);
27
-
28
- --color-amber-contrast: var(--amber-contrast);
29
- --color-amber-surface: var(--amber-surface);
30
- --color-amber-indicator: var(--amber-indicator);
31
- --color-amber-track: var(--amber-track);
32
- }
33
-
34
- :root {
35
- --amber-1: color(display-p3 0.995 0.992 0.985);
36
- --amber-2: color(display-p3 0.994 0.986 0.921);
37
- --amber-3: color(display-p3 0.994 0.969 0.782);
38
- --amber-4: color(display-p3 0.989 0.937 0.65);
39
- --amber-5: color(display-p3 0.97 0.902 0.527);
40
- --amber-6: color(display-p3 0.936 0.844 0.506);
41
- --amber-7: color(display-p3 0.89 0.762 0.443);
42
- --amber-8: color(display-p3 0.85 0.65 0.3);
43
- --amber-9: color(display-p3 1 0.77 0.26);
44
- --amber-10: color(display-p3 0.959 0.741 0.274);
45
- --amber-11: color(display-p3 0.64 0.4 0);
46
- --amber-12: color(display-p3 0.294 0.208 0.145);
47
-
48
- --amber-a1: color(display-p3 0.757 0.514 0.024 / 0.016);
49
- --amber-a2: color(display-p3 0.902 0.804 0.008 / 0.079);
50
- --amber-a3: color(display-p3 0.965 0.859 0.004 / 0.22);
51
- --amber-a4: color(display-p3 0.969 0.82 0.004 / 0.35);
52
- --amber-a5: color(display-p3 0.933 0.796 0.004 / 0.475);
53
- --amber-a6: color(display-p3 0.875 0.682 0.004 / 0.495);
54
- --amber-a7: color(display-p3 0.804 0.573 0 / 0.557);
55
- --amber-a8: color(display-p3 0.788 0.502 0 / 0.699);
56
- --amber-a9: color(display-p3 1 0.686 0 / 0.742);
57
- --amber-a10: color(display-p3 0.945 0.643 0 / 0.726);
58
- --amber-a11: color(display-p3 0.64 0.4 0);
59
- --amber-a12: color(display-p3 0.294 0.208 0.145);
60
-
61
- --amber-contrast: #21201c; /* light mode sand 12 */
62
- --amber-surface: color(display-p3 0.9922 0.9843 0.902 / 0.8);
63
- --amber-indicator: var(--amber-9);
64
- --amber-track: var(--amber-9);
65
- }
66
-
67
- .dark {
68
- --amber-1: color(display-p3 0.082 0.07 0.05);
69
- --amber-2: color(display-p3 0.111 0.094 0.064);
70
- --amber-3: color(display-p3 0.178 0.128 0.049);
71
- --amber-4: color(display-p3 0.239 0.156 0);
72
- --amber-5: color(display-p3 0.29 0.193 0);
73
- --amber-6: color(display-p3 0.344 0.245 0.076);
74
- --amber-7: color(display-p3 0.422 0.314 0.141);
75
- --amber-8: color(display-p3 0.535 0.399 0.189);
76
- --amber-9: color(display-p3 1 0.77 0.26);
77
- --amber-10: color(display-p3 1 0.87 0.15);
78
- --amber-11: color(display-p3 1 0.8 0.29);
79
- --amber-12: color(display-p3 0.984 0.909 0.726);
80
-
81
- --amber-a1: color(display-p3 0.992 0.298 0 / 0.017);
82
- --amber-a2: color(display-p3 0.988 0.651 0 / 0.047);
83
- --amber-a3: color(display-p3 1 0.6 0 / 0.118);
84
- --amber-a4: color(display-p3 1 0.557 0 / 0.185);
85
- --amber-a5: color(display-p3 1 0.592 0 / 0.24);
86
- --amber-a6: color(display-p3 1 0.659 0.094 / 0.299);
87
- --amber-a7: color(display-p3 1 0.714 0.263 / 0.383);
88
- --amber-a8: color(display-p3 0.996 0.729 0.306 / 0.5);
89
- --amber-a9: color(display-p3 1 0.769 0.259);
90
- --amber-a10: color(display-p3 1 0.871 0.149);
91
- --amber-a11: color(display-p3 1 0.8 0.29);
92
- --amber-a12: color(display-p3 0.984 0.909 0.726);
93
-
94
- --amber-surface: color(display-p3 0.1412 0.1176 0.0784 / 0.5);
95
- }
@@ -1,29 +0,0 @@
1
- @theme inline static {
2
- --color-black-a1: var(--black-a1);
3
- --color-black-a2: var(--black-a2);
4
- --color-black-a3: var(--black-a3);
5
- --color-black-a4: var(--black-a4);
6
- --color-black-a5: var(--black-a5);
7
- --color-black-a6: var(--black-a6);
8
- --color-black-a7: var(--black-a7);
9
- --color-black-a8: var(--black-a8);
10
- --color-black-a9: var(--black-a9);
11
- --color-black-a10: var(--black-a10);
12
- --color-black-a11: var(--black-a11);
13
- --color-black-a12: var(--black-a12);
14
- }
15
-
16
- :root {
17
- --black-a1: color(display-p3 0 0 0 / 0.05);
18
- --black-a2: color(display-p3 0 0 0 / 0.1);
19
- --black-a3: color(display-p3 0 0 0 / 0.15);
20
- --black-a4: color(display-p3 0 0 0 / 0.2);
21
- --black-a5: color(display-p3 0 0 0 / 0.3);
22
- --black-a6: color(display-p3 0 0 0 / 0.4);
23
- --black-a7: color(display-p3 0 0 0 / 0.5);
24
- --black-a8: color(display-p3 0 0 0 / 0.6);
25
- --black-a9: color(display-p3 0 0 0 / 0.7);
26
- --black-a10: color(display-p3 0 0 0 / 0.8);
27
- --black-a11: color(display-p3 0 0 0 / 0.9);
28
- --black-a12: color(display-p3 0 0 0 / 0.95);
29
- }
@@ -1,32 +0,0 @@
1
- [data-accent-color='blue'] {
2
- --accent-1: var(--blue-1);
3
- --accent-2: var(--blue-2);
4
- --accent-3: var(--blue-3);
5
- --accent-4: var(--blue-4);
6
- --accent-5: var(--blue-5);
7
- --accent-6: var(--blue-6);
8
- --accent-7: var(--blue-7);
9
- --accent-8: var(--blue-8);
10
- --accent-9: var(--blue-9);
11
- --accent-10: var(--blue-10);
12
- --accent-11: var(--blue-11);
13
- --accent-12: var(--blue-12);
14
-
15
- --accent-a1: var(--blue-a1);
16
- --accent-a2: var(--blue-a2);
17
- --accent-a3: var(--blue-a3);
18
- --accent-a4: var(--blue-a4);
19
- --accent-a5: var(--blue-a5);
20
- --accent-a6: var(--blue-a6);
21
- --accent-a7: var(--blue-a7);
22
- --accent-a8: var(--blue-a8);
23
- --accent-a9: var(--blue-a9);
24
- --accent-a10: var(--blue-a10);
25
- --accent-a11: var(--blue-a11);
26
- --accent-a12: var(--blue-a12);
27
-
28
- --accent-contrast: var(--blue-contrast);
29
- --accent-surface: var(--blue-surface);
30
- --accent-indicator: var(--blue-indicator);
31
- --accent-track: var(--blue-track);
32
- }
package/dist/blue-p3.css DELETED
@@ -1,95 +0,0 @@
1
- @theme inline static {
2
- --color-blue-1: var(--blue-1);
3
- --color-blue-2: var(--blue-2);
4
- --color-blue-3: var(--blue-3);
5
- --color-blue-4: var(--blue-4);
6
- --color-blue-5: var(--blue-5);
7
- --color-blue-6: var(--blue-6);
8
- --color-blue-7: var(--blue-7);
9
- --color-blue-8: var(--blue-8);
10
- --color-blue-9: var(--blue-9);
11
- --color-blue-10: var(--blue-10);
12
- --color-blue-11: var(--blue-11);
13
- --color-blue-12: var(--blue-12);
14
-
15
- --color-blue-a1: var(--blue-a1);
16
- --color-blue-a2: var(--blue-a2);
17
- --color-blue-a3: var(--blue-a3);
18
- --color-blue-a4: var(--blue-a4);
19
- --color-blue-a5: var(--blue-a5);
20
- --color-blue-a6: var(--blue-a6);
21
- --color-blue-a7: var(--blue-a7);
22
- --color-blue-a8: var(--blue-a8);
23
- --color-blue-a9: var(--blue-a9);
24
- --color-blue-a10: var(--blue-a10);
25
- --color-blue-a11: var(--blue-a11);
26
- --color-blue-a12: var(--blue-a12);
27
-
28
- --color-blue-contrast: var(--blue-contrast);
29
- --color-blue-surface: var(--blue-surface);
30
- --color-blue-indicator: var(--blue-indicator);
31
- --color-blue-track: var(--blue-track);
32
- }
33
-
34
- :root {
35
- --blue-1: color(display-p3 0.986 0.992 0.999);
36
- --blue-2: color(display-p3 0.96 0.979 0.998);
37
- --blue-3: color(display-p3 0.912 0.956 0.991);
38
- --blue-4: color(display-p3 0.853 0.932 1);
39
- --blue-5: color(display-p3 0.788 0.894 0.998);
40
- --blue-6: color(display-p3 0.709 0.843 0.976);
41
- --blue-7: color(display-p3 0.606 0.777 0.947);
42
- --blue-8: color(display-p3 0.451 0.688 0.917);
43
- --blue-9: color(display-p3 0.247 0.556 0.969);
44
- --blue-10: color(display-p3 0.234 0.523 0.912);
45
- --blue-11: color(display-p3 0.15 0.44 0.84);
46
- --blue-12: color(display-p3 0.102 0.193 0.379);
47
-
48
- --blue-a1: color(display-p3 0.024 0.514 1 / 0.016);
49
- --blue-a2: color(display-p3 0.024 0.514 0.906 / 0.04);
50
- --blue-a3: color(display-p3 0.012 0.506 0.914 / 0.087);
51
- --blue-a4: color(display-p3 0.008 0.545 1 / 0.146);
52
- --blue-a5: color(display-p3 0.004 0.502 0.984 / 0.212);
53
- --blue-a6: color(display-p3 0.004 0.463 0.922 / 0.291);
54
- --blue-a7: color(display-p3 0.004 0.431 0.863 / 0.393);
55
- --blue-a8: color(display-p3 0 0.427 0.851 / 0.55);
56
- --blue-a9: color(display-p3 0 0.412 0.961 / 0.753);
57
- --blue-a10: color(display-p3 0 0.376 0.886 / 0.765);
58
- --blue-a11: color(display-p3 0.15 0.44 0.84);
59
- --blue-a12: color(display-p3 0.102 0.193 0.379);
60
-
61
- --blue-contrast: white;
62
- --blue-surface: color(display-p3 0.9529 0.9765 0.9961 / 0.8);
63
- --blue-indicator: var(--blue-9);
64
- --blue-track: var(--blue-9);
65
- }
66
-
67
- .dark {
68
- --blue-1: color(display-p3 0.057 0.081 0.122);
69
- --blue-2: color(display-p3 0.072 0.098 0.147);
70
- --blue-3: color(display-p3 0.078 0.154 0.27);
71
- --blue-4: color(display-p3 0.033 0.197 0.37);
72
- --blue-5: color(display-p3 0.08 0.245 0.441);
73
- --blue-6: color(display-p3 0.14 0.298 0.511);
74
- --blue-7: color(display-p3 0.195 0.361 0.6);
75
- --blue-8: color(display-p3 0.239 0.434 0.72);
76
- --blue-9: color(display-p3 0.247 0.556 0.969);
77
- --blue-10: color(display-p3 0.344 0.612 0.973);
78
- --blue-11: color(display-p3 0.49 0.72 1);
79
- --blue-12: color(display-p3 0.788 0.898 0.99);
80
-
81
- --blue-a1: color(display-p3 0 0.333 1 / 0.059);
82
- --blue-a2: color(display-p3 0.114 0.435 0.988 / 0.085);
83
- --blue-a3: color(display-p3 0.122 0.463 1 / 0.219);
84
- --blue-a4: color(display-p3 0 0.467 1 / 0.324);
85
- --blue-a5: color(display-p3 0.098 0.51 1 / 0.4);
86
- --blue-a6: color(display-p3 0.224 0.557 1 / 0.475);
87
- --blue-a7: color(display-p3 0.294 0.584 1 / 0.572);
88
- --blue-a8: color(display-p3 0.314 0.592 1 / 0.702);
89
- --blue-a9: color(display-p3 0.251 0.573 0.996 / 0.967);
90
- --blue-a10: color(display-p3 0.357 0.631 1 / 0.971);
91
- --blue-a11: color(display-p3 0.49 0.72 1);
92
- --blue-a12: color(display-p3 0.788 0.898 0.99);
93
-
94
- --blue-surface: color(display-p3 0.0706 0.1255 0.2196 / 0.5);
95
- }
@@ -1,32 +0,0 @@
1
- [data-accent-color='bronze'] {
2
- --accent-1: var(--bronze-1);
3
- --accent-2: var(--bronze-2);
4
- --accent-3: var(--bronze-3);
5
- --accent-4: var(--bronze-4);
6
- --accent-5: var(--bronze-5);
7
- --accent-6: var(--bronze-6);
8
- --accent-7: var(--bronze-7);
9
- --accent-8: var(--bronze-8);
10
- --accent-9: var(--bronze-9);
11
- --accent-10: var(--bronze-10);
12
- --accent-11: var(--bronze-11);
13
- --accent-12: var(--bronze-12);
14
-
15
- --accent-a1: var(--bronze-a1);
16
- --accent-a2: var(--bronze-a2);
17
- --accent-a3: var(--bronze-a3);
18
- --accent-a4: var(--bronze-a4);
19
- --accent-a5: var(--bronze-a5);
20
- --accent-a6: var(--bronze-a6);
21
- --accent-a7: var(--bronze-a7);
22
- --accent-a8: var(--bronze-a8);
23
- --accent-a9: var(--bronze-a9);
24
- --accent-a10: var(--bronze-a10);
25
- --accent-a11: var(--bronze-a11);
26
- --accent-a12: var(--bronze-a12);
27
-
28
- --accent-contrast: var(--bronze-contrast);
29
- --accent-surface: var(--bronze-surface);
30
- --accent-indicator: var(--bronze-indicator);
31
- --accent-track: var(--bronze-track);
32
- }