@semanticus/semanticus-css 0.9.0 → 1.0.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 (144) hide show
  1. package/NOTICE +16 -16
  2. package/README.md +128 -29
  3. package/dist/semanticus-no-utilities.css +11 -0
  4. package/dist/semanticus-semantics.css +3 -4
  5. package/dist/semanticus-utilities.css +11 -0
  6. package/dist/semanticus.css +4 -12
  7. package/dist/semanticus.palette.amber.css +1 -1
  8. package/dist/semanticus.palette.azure.css +1 -0
  9. package/dist/semanticus.palette.blue.css +1 -1
  10. package/dist/semanticus.palette.cyan.css +1 -1
  11. package/dist/semanticus.palette.fuchsia.css +1 -1
  12. package/dist/semanticus.palette.green.css +1 -1
  13. package/dist/semanticus.palette.grey.css +1 -1
  14. package/dist/semanticus.palette.indigo.css +1 -1
  15. package/dist/semanticus.palette.jade.css +1 -1
  16. package/dist/semanticus.palette.lime.css +1 -1
  17. package/dist/semanticus.palette.orange.css +1 -1
  18. package/dist/semanticus.palette.pink.css +1 -1
  19. package/dist/semanticus.palette.pumpkin.css +1 -1
  20. package/dist/semanticus.palette.purple.css +1 -1
  21. package/dist/semanticus.palette.red.css +1 -1
  22. package/dist/semanticus.palette.sand.css +1 -1
  23. package/dist/semanticus.palette.slate.css +1 -1
  24. package/dist/semanticus.palette.violet.css +1 -1
  25. package/dist/semanticus.palette.yellow.css +1 -1
  26. package/dist/semanticus.palette.zinc.css +1 -1
  27. package/dist/semanticus.size.pico.css +1 -1
  28. package/package.json +24 -15
  29. package/src/components/_card.css +84 -0
  30. package/src/{variants → components}/_sidebar.css +3 -5
  31. package/src/components/modules.css +2 -0
  32. package/src/index.css +8 -10
  33. package/src/no-utilities.css +22 -0
  34. package/src/palettes/amber.css +28 -53
  35. package/src/palettes/azure.css +31 -0
  36. package/src/palettes/blue.css +28 -53
  37. package/src/palettes/cyan.css +28 -53
  38. package/src/palettes/fuchsia.css +28 -53
  39. package/src/palettes/green.css +28 -53
  40. package/src/palettes/grey.css +28 -53
  41. package/src/palettes/indigo.css +28 -53
  42. package/src/palettes/jade.css +28 -53
  43. package/src/palettes/lime.css +28 -53
  44. package/src/palettes/orange.css +28 -53
  45. package/src/palettes/pink.css +28 -53
  46. package/src/palettes/pumpkin.css +28 -53
  47. package/src/palettes/purple.css +28 -53
  48. package/src/palettes/red.css +28 -53
  49. package/src/palettes/sand.css +28 -53
  50. package/src/palettes/slate.css +28 -53
  51. package/src/palettes/violet.css +28 -53
  52. package/src/palettes/yellow.css +28 -53
  53. package/src/palettes/zinc.css +28 -53
  54. package/src/semantics/attributes/_aria-busy.css +0 -3
  55. package/src/semantics/attributes/_hidden.css +0 -3
  56. package/src/semantics/attributes/_role-group-search.css +11 -14
  57. package/src/semantics/attributes/_role-toolbar.css +2 -5
  58. package/src/semantics/attributes/_role-tooltip.css +6 -9
  59. package/src/semantics/elements/_article.css +0 -3
  60. package/src/semantics/elements/_aside.css +1 -7
  61. package/src/semantics/elements/_blockquote.css +2 -2
  62. package/src/semantics/elements/_body.css +1 -4
  63. package/src/semantics/elements/_button.css +23 -26
  64. package/src/semantics/elements/_code.css +5 -8
  65. package/src/semantics/elements/_del.css +1 -1
  66. package/src/semantics/elements/_details.css +39 -40
  67. package/src/semantics/elements/_dialog.css +13 -17
  68. package/src/semantics/elements/_document.css +10 -4
  69. package/src/semantics/elements/_embedded.css +0 -3
  70. package/src/semantics/elements/_figure.css +0 -3
  71. package/src/semantics/elements/_footer.css +0 -3
  72. package/src/semantics/elements/_header.css +0 -3
  73. package/src/semantics/elements/_headings.css +7 -17
  74. package/src/semantics/elements/_hgroup.css +1 -1
  75. package/src/semantics/elements/_hr.css +1 -4
  76. package/src/semantics/elements/_input.css +33 -36
  77. package/src/semantics/elements/_ins.css +1 -1
  78. package/src/semantics/elements/_links.css +22 -18
  79. package/src/semantics/elements/_main.css +0 -4
  80. package/src/semantics/elements/_mark.css +2 -2
  81. package/src/semantics/elements/_nav.css +5 -8
  82. package/src/semantics/elements/_progress.css +5 -8
  83. package/src/semantics/elements/_section.css +0 -3
  84. package/src/semantics/elements/_small.css +3 -0
  85. package/src/semantics/elements/_table.css +3 -5
  86. package/src/semantics/elements/_type-checkbox-radio.css +19 -22
  87. package/src/semantics/elements/_type-color.css +2 -5
  88. package/src/semantics/elements/_type-date.css +1 -4
  89. package/src/semantics/elements/_type-file.css +7 -10
  90. package/src/semantics/elements/_type-range.css +11 -14
  91. package/src/semantics/elements/_type-search.css +6 -10
  92. package/src/semantics/index.css +2 -5
  93. package/src/semantics/modules.css +1 -7
  94. package/src/sizes/pico.css +20 -33
  95. package/src/utilities/_grid.css +306 -0
  96. package/src/utilities/_variables.css +27 -42
  97. package/src/utilities/borders/_border-radius.css +54 -79
  98. package/src/utilities/borders/_border-style.css +15 -5
  99. package/src/utilities/borders/_border-width.css +0 -28
  100. package/src/utilities/colors/_bg-colors.css +75 -0
  101. package/src/utilities/colors/_border-colors.css +17 -39
  102. package/src/utilities/colors/_subtle-colors.css +145 -0
  103. package/src/utilities/colors/_text-bg-colors.css +62 -0
  104. package/src/utilities/colors/_text-colors.css +32 -409
  105. package/src/utilities/effects/_focus-ring.css +33 -0
  106. package/src/utilities/effects/_shadows.css +0 -33
  107. package/src/utilities/index.css +16 -0
  108. package/src/utilities/layout/_misc.css +2 -5
  109. package/src/utilities/layout/{_grid.css → _ratio.css} +0 -19
  110. package/src/utilities/modules.css +9 -3
  111. package/src/utilities/sizing/_width.css +8 -0
  112. package/src/utilities/spacing/_gap.css +144 -144
  113. package/src/utilities/spacing/_margin.css +324 -324
  114. package/src/utilities/spacing/_padding.css +324 -324
  115. package/src/utilities/typography/_font-sizes.css +6 -6
  116. package/src/variables/_all.css +2 -20
  117. package/src/variables/_elements.css +29 -28
  118. package/src/variables/_theme.css +336 -0
  119. package/src/variants/_variables.css +24 -0
  120. package/src/variants/intent/_contrast.css +46 -0
  121. package/src/variants/intent/_danger.css +38 -0
  122. package/src/variants/intent/_info.css +38 -0
  123. package/src/variants/intent/_primary.css +38 -0
  124. package/src/variants/intent/_secondary.css +38 -0
  125. package/src/variants/intent/_success.css +38 -0
  126. package/src/variants/intent/_warning.css +38 -0
  127. package/src/variants/{_container.css → modifiers/_container.css} +3 -10
  128. package/src/variants/modifiers/_ghost.css +164 -0
  129. package/src/variants/modifiers/_striped.css +11 -0
  130. package/src/variants/modifiers/_subtle.css +133 -0
  131. package/src/variants/modules.css +12 -14
  132. package/src/_normalize.css +0 -214
  133. package/src/semantics/_misc.css +0 -3
  134. package/src/utilities/colors/_background-colors.css +0 -248
  135. package/src/variables/_colors.css +0 -355
  136. package/src/variables/_components.css +0 -330
  137. package/src/variables/_icons.css +0 -55
  138. package/src/variables/_layout.css +0 -123
  139. package/src/variants/_contained.css +0 -43
  140. package/src/variants/_contrast.css +0 -61
  141. package/src/variants/_ghost.css +0 -68
  142. package/src/variants/_pane-panel-card.css +0 -54
  143. package/src/variants/_secondary.css +0 -48
  144. package/src/variants/_striped.css +0 -10
@@ -1 +1 @@
1
- [data-theme=light],:root:not([data-theme=dark]),:host(:not([data-theme=dark])){--color-text-selection:#b7880040;--color-primary-rgb:135, 100, 0;--color-primary-bg:#ffbf00;--color-primary-border:var(--color-primary-bg);--color-primary-underline:#87640080;--color-primary-hover:#694d00;--color-primary-hover-bg:#e8ae01;--color-primary-hover-border:var(--color-primary-hover-bg);--color-primary-hover-underline:var(--color-primary-hover);--color-primary-focus:#b7880080;--color-primary-inverse:#000;--switch-thumb-shadow:0 0 .5rem #00000040}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme]),:host(:not([data-theme])){--color-text-selection:#c7940030;--color-primary-rgb:199, 148, 0;--color-primary-bg:#ffbf00;--color-primary-border:var(--color-primary-bg);--color-primary-underline:#c7940080;--color-primary-hover:#e8ae01;--color-primary-hover-bg:#fecc63;--color-primary-hover-border:var(--color-primary-hover-bg);--color-primary-hover-underline:var(--color-primary-hover);--color-primary-focus:#c7940060;--color-primary-inverse:#000;--switch-thumb-shadow:0 0 .5rem #00000040}}[data-theme=dark]{--color-text-selection:#c7940030;--color-primary-rgb:199, 148, 0;--color-primary-bg:#ffbf00;--color-primary-border:var(--color-primary-bg);--color-primary-underline:#c7940080;--color-primary-hover:#e8ae01;--color-primary-hover-bg:#fecc63;--color-primary-hover-border:var(--color-primary-hover-bg);--color-primary-hover-underline:var(--color-primary-hover);--color-primary-focus:#c7940060;--color-primary-inverse:#000;--switch-thumb-shadow:0 0 .5rem #00000040}
1
+ :root,:host{--color-amber-550:#876400;--color-amber-350:#c79400;--color-amber-200:#ffbf00;--color-primary-text:light-dark(var(--color-amber-550),var(--color-amber-350));--color-primary-fill:var(--color-amber-200);--color-primary-on-fill:black;--switch-thumb-glow:light-dark(0 0 .5rem oklch(0% 0 0/.25),0 0 .5rem oklch(0% 0 0/.25))}
@@ -0,0 +1 @@
1
+ :root,:host{--color-azure-550:#0172ad;--color-azure-350:#01aaff;--color-primary-text:light-dark(var(--color-azure-550),var(--color-azure-350));--color-primary-fill:var(--color-azure-550);--color-primary-on-fill:white;--switch-thumb-glow:light-dark(0 0 0 oklch(0% 0 0/0),0 0 .5rem oklch(0% 0 0/.25))}
@@ -1 +1 @@
1
- [data-theme=light],:root:not([data-theme=dark]),:host(:not([data-theme=dark])){--color-text-selection:#748bf840;--color-primary-rgb:32, 96, 223;--color-primary-bg:#2060df;--color-primary-border:var(--color-primary-bg);--color-primary-underline:#2060df80;--color-primary-hover:#184eb8;--color-primary-hover-bg:#1d59d0;--color-primary-hover-border:var(--color-primary-hover-bg);--color-primary-hover-underline:var(--color-primary-hover);--color-primary-focus:#748bf880;--color-primary-inverse:#fff;--switch-thumb-shadow:0 0 0 #0000}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme]),:host(:not([data-theme])){--color-text-selection:#8999f930;--color-primary-rgb:137, 153, 249;--color-primary-bg:#2060df;--color-primary-border:var(--color-primary-bg);--color-primary-underline:#8999f980;--color-primary-hover:#aeb5fb;--color-primary-hover-bg:#3c71f7;--color-primary-hover-border:var(--color-primary-hover-bg);--color-primary-hover-underline:var(--color-primary-hover);--color-primary-focus:#8999f960;--color-primary-inverse:#fff;--switch-thumb-shadow:0 0 0 #0000}}[data-theme=dark]{--color-text-selection:#8999f930;--color-primary-rgb:137, 153, 249;--color-primary-bg:#2060df;--color-primary-border:var(--color-primary-bg);--color-primary-underline:#8999f980;--color-primary-hover:#aeb5fb;--color-primary-hover-bg:#3c71f7;--color-primary-hover-border:var(--color-primary-hover-bg);--color-primary-hover-underline:var(--color-primary-hover);--color-primary-focus:#8999f960;--color-primary-inverse:#fff;--switch-thumb-shadow:0 0 0 #0000}
1
+ :root,:host{--color-blue-550:#2060df;--color-blue-350:#8999f9;--color-primary-text:light-dark(var(--color-blue-550),var(--color-blue-350));--color-primary-fill:var(--color-blue-550);--color-primary-on-fill:white;--switch-thumb-glow:light-dark(0 0 0 oklch(0% 0 0/0),0 0 0 oklch(0% 0 0/0))}
@@ -1 +1 @@
1
- [data-theme=light],:root:not([data-theme=dark]),:host(:not([data-theme=dark])){--color-text-selection:#5ca7fa40;--color-primary-rgb:4, 120, 120;--color-primary-bg:#047878;--color-primary-border:var(--color-primary-bg);--color-primary-underline:#04787880;--color-primary-hover:#025d5d;--color-primary-hover-bg:#046a6a;--color-primary-hover-border:var(--color-primary-hover-bg);--color-primary-hover-underline:var(--color-primary-hover);--color-primary-focus:#5ca7fa80;--color-primary-inverse:#fff;--switch-thumb-shadow:0 0 0 #0000}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme]),:host(:not([data-theme])){--color-text-selection:#0bc2c230;--color-primary-rgb:10, 194, 194;--color-primary-bg:#047878;--color-primary-border:var(--color-primary-bg);--color-primary-underline:#0bc2c280;--color-primary-hover:#25dddd;--color-primary-hover-bg:#058686;--color-primary-hover-border:var(--color-primary-hover-bg);--color-primary-hover-underline:var(--color-primary-hover);--color-primary-focus:#0bc2c260;--color-primary-inverse:#fff;--switch-thumb-shadow:0 0 0 #0000}}[data-theme=dark]{--color-text-selection:#0bc2c230;--color-primary-rgb:10, 194, 194;--color-primary-bg:#047878;--color-primary-border:var(--color-primary-bg);--color-primary-underline:#0bc2c280;--color-primary-hover:#25dddd;--color-primary-hover-bg:#058686;--color-primary-hover-border:var(--color-primary-hover-bg);--color-primary-hover-underline:var(--color-primary-hover);--color-primary-focus:#0bc2c260;--color-primary-inverse:#fff;--switch-thumb-shadow:0 0 0 #0000}
1
+ :root,:host{--color-cyan-550:#047878;--color-cyan-350:#0ab1b1;--color-primary-text:light-dark(var(--color-cyan-550),var(--color-cyan-350));--color-primary-fill:var(--color-cyan-550);--color-primary-on-fill:white;--switch-thumb-glow:light-dark(0 0 0 oklch(0% 0 0/0),0 0 0 oklch(0% 0 0/0))}
@@ -1 +1 @@
1
- [data-theme=light],:root:not([data-theme=dark]),:host(:not([data-theme=dark])){--color-text-selection:#f748b740;--color-primary-rgb:193, 32, 139;--color-primary-bg:#c1208b;--color-primary-border:var(--color-primary-bg);--color-primary-underline:#c1208b80;--color-primary-hover:#98176d;--color-primary-hover-bg:#ac1c7c;--color-primary-hover-border:var(--color-primary-hover-bg);--color-primary-hover-underline:var(--color-primary-hover);--color-primary-focus:#f748b780;--color-primary-inverse:#fff;--switch-thumb-shadow:0 0 0 #0000}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme]),:host(:not([data-theme])){--color-text-selection:#f983c730;--color-primary-rgb:249, 131, 199;--color-primary-bg:#c1208b;--color-primary-border:var(--color-primary-bg);--color-primary-underline:#f983c780;--color-primary-hover:#f9b1d8;--color-primary-hover-bg:#ed2aac;--color-primary-hover-border:var(--color-primary-hover-bg);--color-primary-hover-underline:var(--color-primary-hover);--color-primary-focus:#f983c760;--color-primary-inverse:#fff;--switch-thumb-shadow:0 0 0 #0000}}[data-theme=dark]{--color-text-selection:#f983c730;--color-primary-rgb:249, 131, 199;--color-primary-bg:#c1208b;--color-primary-border:var(--color-primary-bg);--color-primary-underline:#f983c780;--color-primary-hover:#f9b1d8;--color-primary-hover-bg:#ed2aac;--color-primary-hover-border:var(--color-primary-hover-bg);--color-primary-hover-underline:var(--color-primary-hover);--color-primary-focus:#f983c760;--color-primary-inverse:#fff;--switch-thumb-shadow:0 0 0 #0000}
1
+ :root,:host{--color-fuchsia-550:#c1208b;--color-fuchsia-350:#f869bf;--color-primary-text:light-dark(var(--color-fuchsia-550),var(--color-fuchsia-350));--color-primary-fill:var(--color-fuchsia-550);--color-primary-on-fill:white;--switch-thumb-glow:light-dark(0 0 0 oklch(0% 0 0/0),0 0 0 oklch(0% 0 0/0))}
@@ -1 +1 @@
1
- [data-theme=light],:root:not([data-theme=dark]),:host(:not([data-theme=dark])){--color-text-selection:#5cc78e40;--color-primary-rgb:43, 122, 76;--color-primary-bg:#2b7a4c;--color-primary-border:var(--color-primary-bg);--color-primary-underline:#2b7a4c80;--color-primary-hover:#20603b;--color-primary-hover-bg:#256d43;--color-primary-hover-border:var(--color-primary-hover-bg);--color-primary-hover-underline:var(--color-primary-hover);--color-primary-focus:#5cc78e80;--color-primary-inverse:#fff;--switch-thumb-shadow:0 0 0 #0000}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme]),:host(:not([data-theme])){--color-text-selection:#6ed59d30;--color-primary-rgb:110, 213, 157;--color-primary-bg:#2b7a4c;--color-primary-border:var(--color-primary-bg);--color-primary-underline:#6ed59d80;--color-primary-hover:#93deb5;--color-primary-hover-bg:#348e59;--color-primary-hover-border:var(--color-primary-hover-bg);--color-primary-hover-underline:var(--color-primary-hover);--color-primary-focus:#6ed59d60;--color-primary-inverse:#fff;--switch-thumb-shadow:0 0 0 #0000}}[data-theme=dark]{--color-text-selection:#6ed59d30;--color-primary-rgb:110, 213, 157;--color-primary-bg:#2b7a4c;--color-primary-border:var(--color-primary-bg);--color-primary-underline:#6ed59d80;--color-primary-hover:#93deb5;--color-primary-hover-bg:#348e59;--color-primary-hover-border:var(--color-primary-hover-bg);--color-primary-hover-underline:var(--color-primary-hover);--color-primary-focus:#6ed59d60;--color-primary-inverse:#fff;--switch-thumb-shadow:0 0 0 #0000}
1
+ :root,:host{--color-green-550:#33790f;--color-green-350:#4eb31b;--color-primary-text:light-dark(var(--color-green-550),var(--color-green-350));--color-primary-fill:var(--color-green-550);--color-primary-on-fill:white;--switch-thumb-glow:light-dark(0 0 0 oklch(0% 0 0/0),0 0 0 oklch(0% 0 0/0))}
@@ -1 +1 @@
1
- [data-theme=light],:root:not([data-theme=dark]),:host(:not([data-theme=dark])){--color-text-selection:#8a99af40;--color-primary-rgb:92, 107, 130;--color-primary-bg:#bfc7d9;--color-primary-border:var(--color-primary-bg);--color-primary-underline:#5c6b8280;--color-primary-hover:#48536b;--color-primary-hover-bg:#aab4c9;--color-primary-hover-border:var(--color-primary-hover-bg);--color-primary-hover-underline:var(--color-primary-hover);--color-primary-focus:#8a99af80;--color-primary-inverse:#000;--switch-thumb-shadow:0 0 .5rem #00000040}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme]),:host(:not([data-theme])){--color-text-selection:#afbdd430;--color-primary-rgb:175, 189, 212;--color-primary-bg:#bfc7d9;--color-primary-border:var(--color-primary-bg);--color-primary-underline:#afbdd480;--color-primary-hover:#c9d3e3;--color-primary-hover-bg:#c9d3e3;--color-primary-hover-border:var(--color-primary-hover-bg);--color-primary-hover-underline:var(--color-primary-hover);--color-primary-focus:#afbdd460;--color-primary-inverse:#000;--switch-thumb-shadow:0 0 .5rem #00000040}}[data-theme=dark]{--color-text-selection:#afbdd430;--color-primary-rgb:175, 189, 212;--color-primary-bg:#bfc7d9;--color-primary-border:var(--color-primary-bg);--color-primary-underline:#afbdd480;--color-primary-hover:#c9d3e3;--color-primary-hover-bg:#c9d3e3;--color-primary-hover-border:var(--color-primary-hover-bg);--color-primary-hover-underline:var(--color-primary-hover);--color-primary-focus:#afbdd460;--color-primary-inverse:#000;--switch-thumb-shadow:0 0 .5rem #00000040}
1
+ :root,:host{--color-grey-550:#6a6a6a;--color-grey-350:#9e9e9e;--color-grey-300:#ababab;--color-primary-text:light-dark(var(--color-grey-550),var(--color-grey-350));--color-primary-fill:var(--color-grey-300);--color-primary-on-fill:black;--switch-thumb-glow:light-dark(0 0 .5rem oklch(0% 0 0/.25),0 0 .5rem oklch(0% 0 0/.25))}
@@ -1 +1 @@
1
- [data-theme=light],:root:not([data-theme=dark]),:host(:not([data-theme=dark])){--color-text-selection:#9486e140;--color-primary-rgb:82, 78, 210;--color-primary-bg:#524ed2;--color-primary-border:var(--color-primary-bg);--color-primary-underline:#524ed280;--color-primary-hover:#4040bf;--color-primary-hover-bg:#4040bf;--color-primary-hover-border:var(--color-primary-hover-bg);--color-primary-hover-underline:var(--color-primary-hover);--color-primary-focus:#9486e180;--color-primary-inverse:#fff;--switch-thumb-shadow:0 0 0 #0000}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme]),:host(:not([data-theme])){--color-text-selection:#b0a3e830;--color-primary-rgb:176, 163, 232;--color-primary-bg:#524ed2;--color-primary-border:var(--color-primary-bg);--color-primary-underline:#b0a3e880;--color-primary-hover:#cac1ee;--color-primary-hover-bg:#655cd6;--color-primary-hover-border:var(--color-primary-hover-bg);--color-primary-hover-underline:var(--color-primary-hover);--color-primary-focus:#b0a3e860;--color-primary-inverse:#fff;--switch-thumb-shadow:0 0 0 #0000}}[data-theme=dark]{--color-text-selection:#b0a3e830;--color-primary-rgb:176, 163, 232;--color-primary-bg:#524ed2;--color-primary-border:var(--color-primary-bg);--color-primary-underline:#b0a3e880;--color-primary-hover:#cac1ee;--color-primary-hover-bg:#655cd6;--color-primary-hover-border:var(--color-primary-hover-bg);--color-primary-hover-underline:var(--color-primary-hover);--color-primary-focus:#b0a3e860;--color-primary-inverse:#fff;--switch-thumb-shadow:0 0 0 #0000}
1
+ :root,:host{--color-indigo-600:#524ed2;--color-indigo-550:#655cd6;--color-indigo-350:#a294e5;--color-primary-text:light-dark(var(--color-indigo-550),var(--color-indigo-350));--color-primary-fill:var(--color-indigo-600);--color-primary-on-fill:white;--switch-thumb-glow:light-dark(0 0 0 oklch(0% 0 0/0),0 0 0 oklch(0% 0 0/0))}
@@ -1 +1 @@
1
- [data-theme=light],:root:not([data-theme=dark]),:host(:not([data-theme=dark])){--color-text-selection:#60ce9b40;--color-primary-rgb:25, 147, 99;--color-primary-bg:#199363;--color-primary-border:var(--color-primary-bg);--color-primary-underline:#19936380;--color-primary-hover:#147a51;--color-primary-hover-bg:#16885b;--color-primary-hover-border:var(--color-primary-hover-bg);--color-primary-hover-underline:var(--color-primary-hover);--color-primary-focus:#60ce9b80;--color-primary-inverse:#fff;--switch-thumb-shadow:0 0 0 #0000}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme]),:host(:not([data-theme])){--color-text-selection:#6ee7af30;--color-primary-rgb:110, 231, 175;--color-primary-bg:#199363;--color-primary-border:var(--color-primary-bg);--color-primary-underline:#6ee7af80;--color-primary-hover:#93edc3;--color-primary-hover-bg:#1ea672;--color-primary-hover-border:var(--color-primary-hover-bg);--color-primary-hover-underline:var(--color-primary-hover);--color-primary-focus:#6ee7af60;--color-primary-inverse:#fff;--switch-thumb-shadow:0 0 0 #0000}}[data-theme=dark]{--color-text-selection:#6ee7af30;--color-primary-rgb:110, 231, 175;--color-primary-bg:#199363;--color-primary-border:var(--color-primary-bg);--color-primary-underline:#6ee7af80;--color-primary-hover:#93edc3;--color-primary-hover-bg:#1ea672;--color-primary-hover-border:var(--color-primary-hover-bg);--color-primary-hover-underline:var(--color-primary-hover);--color-primary-focus:#6ee7af60;--color-primary-inverse:#fff;--switch-thumb-shadow:0 0 0 #0000}
1
+ :root,:host{--color-jade-550:#007a50;--color-jade-350:#00b478;--color-primary-text:light-dark(var(--color-jade-550),var(--color-jade-350));--color-primary-fill:var(--color-jade-550);--color-primary-on-fill:white;--switch-thumb-glow:light-dark(0 0 0 oklch(0% 0 0/0),0 0 0 oklch(0% 0 0/0))}
@@ -1 +1 @@
1
- [data-theme=light],:root:not([data-theme=dark]),:host(:not([data-theme=dark])){--color-text-selection:#84c32940;--color-primary-rgb:92, 138, 18;--color-primary-bg:#b3e373;--color-primary-border:var(--color-primary-bg);--color-primary-underline:#5c8a1280;--color-primary-hover:#466b0e;--color-primary-hover-bg:#bfea85;--color-primary-hover-border:var(--color-primary-hover-bg);--color-primary-hover-underline:var(--color-primary-hover);--color-primary-focus:#84c32980;--color-primary-inverse:#000;--switch-thumb-shadow:0 0 .5rem #00000040}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme]),:host(:not([data-theme])){--color-text-selection:#9cdc3c30;--color-primary-rgb:156, 220, 60;--color-primary-bg:#b3e373;--color-primary-border:var(--color-primary-bg);--color-primary-underline:#9cdc3c80;--color-primary-hover:#b3e56b;--color-primary-hover-bg:#c2e98c;--color-primary-hover-border:var(--color-primary-hover-bg);--color-primary-hover-underline:var(--color-primary-hover);--color-primary-focus:#9cdc3c60;--color-primary-inverse:#000;--switch-thumb-shadow:0 0 .5rem #00000040}}[data-theme=dark]{--color-text-selection:#9cdc3c30;--color-primary-rgb:156, 220, 60;--color-primary-bg:#b3e373;--color-primary-border:var(--color-primary-bg);--color-primary-underline:#9cdc3c80;--color-primary-hover:#b3e56b;--color-primary-hover-bg:#c2e98c;--color-primary-hover-border:var(--color-primary-hover-bg);--color-primary-hover-underline:var(--color-primary-hover);--color-primary-focus:#9cdc3c60;--color-primary-inverse:#000;--switch-thumb-shadow:0 0 .5rem #00000040}
1
+ :root,:host{--color-lime-550:#577400;--color-lime-350:#82ab00;--color-lime-200:#a5d601;--color-primary-text:light-dark(var(--color-lime-550),var(--color-lime-350));--color-primary-fill:var(--color-lime-200);--color-primary-on-fill:black;--switch-thumb-glow:light-dark(0 0 .5rem oklch(0% 0 0/.25),0 0 .5rem oklch(0% 0 0/.25))}
@@ -1 +1 @@
1
- [data-theme=light],:root:not([data-theme=dark]),:host(:not([data-theme=dark])){--color-text-selection:#ff814640;--color-primary-rgb:191, 77, 0;--color-primary-bg:#cf5300;--color-primary-border:var(--color-primary-bg);--color-primary-underline:#bf4d0080;--color-primary-hover:#993d00;--color-primary-hover-bg:#b74900;--color-primary-hover-border:var(--color-primary-hover-bg);--color-primary-hover-underline:var(--color-primary-hover);--color-primary-focus:#ff814680;--color-primary-inverse:#fff;--switch-thumb-shadow:0 0 0 #0000}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme]),:host(:not([data-theme])){--color-text-selection:#ff9e7030;--color-primary-rgb:255, 158, 112;--color-primary-bg:#cf5300;--color-primary-border:var(--color-primary-bg);--color-primary-underline:#ff9e7080;--color-primary-hover:#ffb695;--color-primary-hover-bg:#e65c00;--color-primary-hover-border:var(--color-primary-hover-bg);--color-primary-hover-underline:var(--color-primary-hover);--color-primary-focus:#ff9e7060;--color-primary-inverse:#fff;--switch-thumb-shadow:0 0 0 #0000}}[data-theme=dark]{--color-text-selection:#ff9e7030;--color-primary-rgb:255, 158, 112;--color-primary-bg:#cf5300;--color-primary-border:var(--color-primary-bg);--color-primary-underline:#ff9e7080;--color-primary-hover:#ffb695;--color-primary-hover-bg:#e65c00;--color-primary-hover-border:var(--color-primary-hover-bg);--color-primary-hover-underline:var(--color-primary-hover);--color-primary-focus:#ff9e7060;--color-primary-inverse:#fff;--switch-thumb-shadow:0 0 0 #0000}
1
+ :root,:host{--color-orange-550:#bd3c13;--color-orange-500:#d24317;--color-orange-350:#f56b3d;--color-primary-text:light-dark(var(--color-orange-550),var(--color-orange-350));--color-primary-fill:var(--color-orange-500);--color-primary-on-fill:white;--switch-thumb-glow:light-dark(0 0 0 oklch(0% 0 0/0),0 0 0 oklch(0% 0 0/0))}
@@ -1 +1 @@
1
- [data-theme=light],:root:not([data-theme=dark]),:host(:not([data-theme=dark])){--color-text-selection:#f6547e40;--color-primary-rgb:199, 34, 89;--color-primary-bg:#d92662;--color-primary-border:var(--color-primary-bg);--color-primary-underline:#c7225980;--color-primary-hover:#9d1945;--color-primary-hover-bg:#b21e4f;--color-primary-hover-border:var(--color-primary-hover-bg);--color-primary-hover-underline:var(--color-primary-hover);--color-primary-focus:#f6547e80;--color-primary-inverse:#fff;--switch-thumb-shadow:0 0 0 #0000}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme]),:host(:not([data-theme])){--color-text-selection:#f8889e30;--color-primary-rgb:248, 136, 158;--color-primary-bg:#d92662;--color-primary-border:var(--color-primary-bg);--color-primary-underline:#f8889e80;--color-primary-hover:#f9b4be;--color-primary-hover-bg:#f42c6f;--color-primary-hover-border:var(--color-primary-hover-bg);--color-primary-hover-underline:var(--color-primary-hover);--color-primary-focus:#f8889e60;--color-primary-inverse:#fff;--switch-thumb-shadow:0 0 0 #0000}}[data-theme=dark]{--color-text-selection:#f8889e30;--color-primary-rgb:248, 136, 158;--color-primary-bg:#d92662;--color-primary-border:var(--color-primary-bg);--color-primary-underline:#f8889e80;--color-primary-hover:#f9b4be;--color-primary-hover-bg:#f42c6f;--color-primary-hover-border:var(--color-primary-hover-bg);--color-primary-hover-underline:var(--color-primary-hover);--color-primary-focus:#f8889e60;--color-primary-inverse:#fff;--switch-thumb-shadow:0 0 0 #0000}
1
+ :root,:host{--color-pink-550:#c72259;--color-pink-500:#d92662;--color-pink-350:#f7708e;--color-primary-text:light-dark(var(--color-pink-550),var(--color-pink-350));--color-primary-fill:var(--color-pink-500);--color-primary-on-fill:white;--switch-thumb-glow:light-dark(0 0 0 oklch(0% 0 0/0),0 0 0 oklch(0% 0 0/0))}
@@ -1 +1 @@
1
- [data-theme=light],:root:not([data-theme=dark]),:host(:not([data-theme=dark])){--color-text-selection:#e8783e40;--color-primary-rgb:158, 56, 6;--color-primary-bg:#f4a37d;--color-primary-border:var(--color-primary-bg);--color-primary-underline:#9e380680;--color-primary-hover:#7a2b05;--color-primary-hover-bg:#f6b091;--color-primary-hover-border:var(--color-primary-hover-bg);--color-primary-hover-underline:var(--color-primary-hover);--color-primary-focus:#e8783e80;--color-primary-inverse:#000;--switch-thumb-shadow:0 0 .5rem #00000040}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme]),:host(:not([data-theme])){--color-text-selection:#f3996f30;--color-primary-rgb:243, 153, 111;--color-primary-bg:#f4a37d;--color-primary-border:var(--color-primary-bg);--color-primary-underline:#f3996f80;--color-primary-hover:#f5b7a8;--color-primary-hover-bg:#f5b7a8;--color-primary-hover-border:var(--color-primary-hover-bg);--color-primary-hover-underline:var(--color-primary-hover);--color-primary-focus:#f3996f60;--color-primary-inverse:#000;--switch-thumb-shadow:0 0 .5rem #00000040}}[data-theme=dark]{--color-text-selection:#f3996f30;--color-primary-rgb:243, 153, 111;--color-primary-bg:#f4a37d;--color-primary-border:var(--color-primary-bg);--color-primary-underline:#f3996f80;--color-primary-hover:#f5b7a8;--color-primary-hover-bg:#f5b7a8;--color-primary-hover-border:var(--color-primary-hover-bg);--color-primary-hover-underline:var(--color-primary-hover);--color-primary-focus:#f3996f60;--color-primary-inverse:#000;--switch-thumb-shadow:0 0 .5rem #00000040}
1
+ :root,:host{--color-pumpkin-550:#9c5900;--color-pumpkin-350:#e48500;--color-pumpkin-300:#ff9500;--color-primary-text:light-dark(var(--color-pumpkin-550),var(--color-pumpkin-350));--color-primary-fill:var(--color-pumpkin-300);--color-primary-on-fill:black;--switch-thumb-glow:light-dark(0 0 .5rem oklch(0% 0 0/.25),0 0 .5rem oklch(0% 0 0/.25))}
@@ -1 +1 @@
1
- [data-theme=light],:root:not([data-theme=dark]),:host(:not([data-theme=dark])){--color-text-selection:#cd68e040;--color-primary-rgb:146, 54, 164;--color-primary-bg:#9236a4;--color-primary-border:var(--color-primary-bg);--color-primary-underline:#9236a480;--color-primary-hover:#802e90;--color-primary-hover-bg:#802e90;--color-primary-hover-border:var(--color-primary-hover-bg);--color-primary-hover-underline:var(--color-primary-hover);--color-primary-focus:#cd68e080;--color-primary-inverse:#fff;--switch-thumb-shadow:0 0 0 #0000}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme]),:host(:not([data-theme])){--color-text-selection:#db90e830;--color-primary-rgb:219, 144, 232;--color-primary-bg:#9236a4;--color-primary-border:var(--color-primary-bg);--color-primary-underline:#db90e880;--color-primary-hover:#e7b6ee;--color-primary-hover-bg:#aa40bf;--color-primary-hover-border:var(--color-primary-hover-bg);--color-primary-hover-underline:var(--color-primary-hover);--color-primary-focus:#db90e860;--color-primary-inverse:#fff;--switch-thumb-shadow:0 0 0 #0000}}[data-theme=dark]{--color-text-selection:#db90e830;--color-primary-rgb:219, 144, 232;--color-primary-bg:#9236a4;--color-primary-border:var(--color-primary-bg);--color-primary-underline:#db90e880;--color-primary-hover:#e7b6ee;--color-primary-hover-bg:#aa40bf;--color-primary-hover-border:var(--color-primary-hover-bg);--color-primary-hover-underline:var(--color-primary-hover);--color-primary-focus:#db90e860;--color-primary-inverse:#fff;--switch-thumb-shadow:0 0 0 #0000}
1
+ :root,:host{--color-purple-600:#9236a4;--color-purple-550:#aa40bf;--color-purple-350:#d47de4;--color-primary-text:light-dark(var(--color-purple-550),var(--color-purple-350));--color-primary-fill:var(--color-purple-600);--color-primary-on-fill:white;--switch-thumb-glow:light-dark(0 0 0 oklch(0% 0 0/0),0 0 0 oklch(0% 0 0/0))}
@@ -1 +1 @@
1
- [data-theme=light],:root:not([data-theme=dark]),:host(:not([data-theme=dark])){--color-text-selection:#f0604840;--color-primary-rgb:197, 47, 33;--color-primary-bg:#c52f21;--color-primary-border:var(--color-primary-bg);--color-primary-underline:#c52f2180;--color-primary-hover:#9b2318;--color-primary-hover-bg:#af291d;--color-primary-hover-border:var(--color-primary-hover-bg);--color-primary-hover-underline:var(--color-primary-hover);--color-primary-focus:#f0604880;--color-primary-inverse:#fff;--switch-thumb-shadow:0 0 0 #0000}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme]),:host(:not([data-theme])){--color-text-selection:#f38f7930;--color-primary-rgb:243, 143, 121;--color-primary-bg:#c52f21;--color-primary-border:var(--color-primary-bg);--color-primary-underline:#f38f7980;--color-primary-hover:#f5b7a8;--color-primary-hover-bg:#ee402e;--color-primary-hover-border:var(--color-primary-hover-bg);--color-primary-hover-underline:var(--color-primary-hover);--color-primary-focus:#f38f7960;--color-primary-inverse:#fff;--switch-thumb-shadow:0 0 0 #0000}}[data-theme=dark]{--color-text-selection:#f38f7930;--color-primary-rgb:243, 143, 121;--color-primary-bg:#c52f21;--color-primary-border:var(--color-primary-bg);--color-primary-underline:#f38f7980;--color-primary-hover:#f5b7a8;--color-primary-hover-bg:#ee402e;--color-primary-hover-border:var(--color-primary-hover-bg);--color-primary-hover-underline:var(--color-primary-hover);--color-primary-focus:#f38f7960;--color-primary-inverse:#fff;--switch-thumb-shadow:0 0 0 #0000}
1
+ :root,:host{--color-red-550:#c52f21;--color-red-350:#f17961;--color-primary-text:light-dark(var(--color-red-550),var(--color-red-350));--color-primary-fill:var(--color-red-550);--color-primary-on-fill:white;--switch-thumb-glow:light-dark(0 0 0 oklch(0% 0 0/0),0 0 0 oklch(0% 0 0/0))}
@@ -1 +1 @@
1
- [data-theme=light],:root:not([data-theme=dark]),:host(:not([data-theme=dark])){--color-text-selection:#b59d7740;--color-primary-rgb:107, 87, 51;--color-primary-bg:#e6d5b8;--color-primary-border:var(--color-primary-bg);--color-primary-underline:#6b573380;--color-primary-hover:#544229;--color-primary-hover-bg:#ebdcc3;--color-primary-hover-border:var(--color-primary-hover-bg);--color-primary-hover-underline:var(--color-primary-hover);--color-primary-focus:#b59d7780;--color-primary-inverse:#000;--switch-thumb-shadow:0 0 .5rem #00000040}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme]),:host(:not([data-theme])){--color-text-selection:#c9b28c30;--color-primary-rgb:201, 178, 140;--color-primary-bg:#e6d5b8;--color-primary-border:var(--color-primary-bg);--color-primary-underline:#c9b28c80;--color-primary-hover:#dcc6a5;--color-primary-hover-bg:#ebdcc3;--color-primary-hover-border:var(--color-primary-hover-bg);--color-primary-hover-underline:var(--color-primary-hover);--color-primary-focus:#c9b28c60;--color-primary-inverse:#000;--switch-thumb-shadow:0 0 .5rem #00000040}}[data-theme=dark]{--color-text-selection:#c9b28c30;--color-primary-rgb:201, 178, 140;--color-primary-bg:#e6d5b8;--color-primary-border:var(--color-primary-bg);--color-primary-underline:#c9b28c80;--color-primary-hover:#dcc6a5;--color-primary-hover-bg:#ebdcc3;--color-primary-hover-border:var(--color-primary-hover-bg);--color-primary-hover-underline:var(--color-primary-hover);--color-primary-focus:#c9b28c60;--color-primary-inverse:#000;--switch-thumb-shadow:0 0 .5rem #00000040}
1
+ :root,:host{--color-sand-550:#6e6a60;--color-sand-350:#a39e8f;--color-sand-200:#ccc6b4;--color-primary-text:light-dark(var(--color-sand-550),var(--color-sand-350));--color-primary-fill:var(--color-sand-200);--color-primary-on-fill:black;--switch-thumb-glow:light-dark(0 0 .5rem oklch(0% 0 0/.25),0 0 .5rem oklch(0% 0 0/.25))}
@@ -1 +1 @@
1
- [data-theme=light],:root:not([data-theme=dark]),:host(:not([data-theme=dark])){--color-text-selection:#8292aa40;--color-primary-rgb:72, 83, 107;--color-primary-bg:#48536b;--color-primary-border:var(--color-primary-bg);--color-primary-underline:#48536b80;--color-primary-hover:#383f54;--color-primary-hover-bg:#383f54;--color-primary-hover-border:var(--color-primary-hover-bg);--color-primary-hover-underline:var(--color-primary-hover);--color-primary-focus:#8292aa80;--color-primary-inverse:#fff;--switch-thumb-shadow:0 0 0 #0000}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme]),:host(:not([data-theme])){--color-text-selection:#9fb0c830;--color-primary-rgb:159, 176, 200;--color-primary-bg:#48536b;--color-primary-border:var(--color-primary-bg);--color-primary-underline:#9fb0c880;--color-primary-hover:#bdcce0;--color-primary-hover-bg:#525f7a;--color-primary-hover-border:var(--color-primary-hover-bg);--color-primary-hover-underline:var(--color-primary-hover);--color-primary-focus:#9fb0c860;--color-primary-inverse:#fff;--switch-thumb-shadow:0 0 0 #0000}}[data-theme=dark]{--color-text-selection:#9fb0c830;--color-primary-rgb:159, 176, 200;--color-primary-bg:#48536b;--color-primary-border:var(--color-primary-bg);--color-primary-underline:#9fb0c880;--color-primary-hover:#bdcce0;--color-primary-hover-bg:#525f7a;--color-primary-hover-border:var(--color-primary-hover-bg);--color-primary-hover-underline:var(--color-primary-hover);--color-primary-focus:#9fb0c860;--color-primary-inverse:#fff;--switch-thumb-shadow:0 0 0 #0000}
1
+ :root,:host{--color-slate-600:#525f7a;--color-slate-550:#5d6b89;--color-slate-350:#909ebe;--color-primary-text:light-dark(var(--color-slate-550),var(--color-slate-350));--color-primary-fill:var(--color-slate-600);--color-primary-on-fill:white;--switch-thumb-glow:light-dark(0 0 0 oklch(0% 0 0/0),0 0 0 oklch(0% 0 0/0))}
@@ -1 +1 @@
1
- [data-theme=light],:root:not([data-theme=dark]),:host(:not([data-theme=dark])){--color-text-selection:#a780d440;--color-primary-rgb:117, 64, 191;--color-primary-bg:#7540bf;--color-primary-border:var(--color-primary-bg);--color-primary-underline:#7540bf80;--color-primary-hover:#6935b3;--color-primary-hover-bg:#6935b3;--color-primary-hover-border:var(--color-primary-hover-bg);--color-primary-hover-underline:var(--color-primary-hover);--color-primary-focus:#a780d480;--color-primary-inverse:#fff;--switch-thumb-shadow:0 0 0 #0000}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme]),:host(:not([data-theme])){--color-text-selection:#bd9fdf30;--color-primary-rgb:189, 159, 223;--color-primary-bg:#7540bf;--color-primary-border:var(--color-primary-bg);--color-primary-underline:#bd9fdf80;--color-primary-hover:#d3bfe8;--color-primary-hover-bg:#8352c5;--color-primary-hover-border:var(--color-primary-hover-bg);--color-primary-hover-underline:var(--color-primary-hover);--color-primary-focus:#bd9fdf60;--color-primary-inverse:#fff;--switch-thumb-shadow:0 0 0 #0000}}[data-theme=dark]{--color-text-selection:#bd9fdf30;--color-primary-rgb:189, 159, 223;--color-primary-bg:#7540bf;--color-primary-border:var(--color-primary-bg);--color-primary-underline:#bd9fdf80;--color-primary-hover:#d3bfe8;--color-primary-hover-bg:#8352c5;--color-primary-hover-border:var(--color-primary-hover-bg);--color-primary-hover-underline:var(--color-primary-hover);--color-primary-focus:#bd9fdf60;--color-primary-inverse:#fff;--switch-thumb-shadow:0 0 0 #0000}
1
+ :root,:host{--color-violet-600:#7540bf;--color-violet-550:#8352c5;--color-violet-350:#b290d9;--color-primary-text:light-dark(var(--color-violet-550),var(--color-violet-350));--color-primary-fill:var(--color-violet-600);--color-primary-on-fill:white;--switch-thumb-glow:light-dark(0 0 0 oklch(0% 0 0/0),0 0 0 oklch(0% 0 0/0))}
@@ -1 +1 @@
1
- [data-theme=light],:root:not([data-theme=dark]),:host(:not([data-theme=dark])){--color-text-selection:#d1bc0040;--color-primary-rgb:138, 122, 0;--color-primary-bg:#fcf19c;--color-primary-border:var(--color-primary-bg);--color-primary-underline:#8a7a0080;--color-primary-hover:#6b5f00;--color-primary-hover-bg:#fdf2b4;--color-primary-hover-border:var(--color-primary-hover-bg);--color-primary-hover-underline:var(--color-primary-hover);--color-primary-focus:#d1bc0080;--color-primary-inverse:#000;--switch-thumb-shadow:0 0 .5rem #00000040}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme]),:host(:not([data-theme])){--color-text-selection:#e9d40030;--color-primary-rgb:233, 212, 0;--color-primary-bg:#fcf19c;--color-primary-border:var(--color-primary-bg);--color-primary-underline:#e9d40080;--color-primary-hover:#f7ec58;--color-primary-hover-bg:#fcf4b6;--color-primary-hover-border:var(--color-primary-hover-bg);--color-primary-hover-underline:var(--color-primary-hover);--color-primary-focus:#e9d40060;--color-primary-inverse:#000;--switch-thumb-shadow:0 0 .5rem #00000040}}[data-theme=dark]{--color-text-selection:#e9d40030;--color-primary-rgb:233, 212, 0;--color-primary-bg:#fcf19c;--color-primary-border:var(--color-primary-bg);--color-primary-underline:#e9d40080;--color-primary-hover:#f7ec58;--color-primary-hover-bg:#fcf4b6;--color-primary-hover-border:var(--color-primary-hover-bg);--color-primary-hover-underline:var(--color-primary-hover);--color-primary-focus:#e9d40060;--color-primary-inverse:#000;--switch-thumb-shadow:0 0 .5rem #00000040}
1
+ :root,:host{--color-yellow-550:#756b00;--color-yellow-350:#ad9f00;--color-yellow-100:#f2df0d;--color-primary-text:light-dark(var(--color-yellow-550),var(--color-yellow-350));--color-primary-fill:var(--color-yellow-100);--color-primary-on-fill:black;--switch-thumb-glow:light-dark(0 0 .5rem oklch(0% 0 0/.25),0 0 .5rem oklch(0% 0 0/.25))}
@@ -1 +1 @@
1
- [data-theme=light],:root:not([data-theme=dark]),:host(:not([data-theme=dark])){--color-text-selection:#7f8b9e40;--color-primary-rgb:82, 95, 122;--color-primary-bg:#525f7a;--color-primary-border:var(--color-primary-bg);--color-primary-underline:#525f7a80;--color-primary-hover:#424b61;--color-primary-hover-bg:#424b61;--color-primary-hover-border:var(--color-primary-hover-bg);--color-primary-hover-underline:var(--color-primary-hover);--color-primary-focus:#7f8b9e80;--color-primary-inverse:#fff;--switch-thumb-shadow:0 0 0 #0000}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme]),:host(:not([data-theme])){--color-text-selection:#9ba8bd30;--color-primary-rgb:155, 168, 189;--color-primary-bg:#525f7a;--color-primary-border:var(--color-primary-bg);--color-primary-underline:#9ba8bd80;--color-primary-hover:#bac5d4;--color-primary-hover-bg:#5d6b89;--color-primary-hover-border:var(--color-primary-hover-bg);--color-primary-hover-underline:var(--color-primary-hover);--color-primary-focus:#9ba8bd60;--color-primary-inverse:#fff;--switch-thumb-shadow:0 0 0 #0000}}[data-theme=dark]{--color-text-selection:#9ba8bd30;--color-primary-rgb:155, 168, 189;--color-primary-bg:#525f7a;--color-primary-border:var(--color-primary-bg);--color-primary-underline:#9ba8bd80;--color-primary-hover:#bac5d4;--color-primary-hover-bg:#5d6b89;--color-primary-hover-border:var(--color-primary-hover-bg);--color-primary-hover-underline:var(--color-primary-hover);--color-primary-focus:#9ba8bd60;--color-primary-inverse:#fff;--switch-thumb-shadow:0 0 0 #0000}
1
+ :root,:host{--color-zinc-550:#646b79;--color-zinc-350:#969eaf;--color-primary-text:light-dark(var(--color-zinc-550),var(--color-zinc-350));--color-primary-fill:var(--color-zinc-550);--color-primary-on-fill:white;--switch-thumb-glow:light-dark(0 0 0 oklch(0% 0 0/0),0 0 0 oklch(0% 0 0/0))}
@@ -1 +1 @@
1
- :root{--font-family-emoji:"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-family-sans-serif:system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif, var(--font-family-emoji);--font-family-monospace:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace, var(--font-family-emoji);--font-family:var(--font-family-sans-serif);--line-height:1.5;--font-weight:400;--font-size:100%;--text-underline-offset:.1rem;--border-radius:.25rem;--border-width:.0625rem;--outline-width:.125rem;--transition:.2s ease-in-out;--base-spacing:1rem;--responsive-multiplier:1;--spacing:calc(var(--base-spacing) * var(--responsive-multiplier));--typography-spacing-vertical:1rem;--grid-column-gap:var(--spacing);--grid-row-gap:var(--spacing);--form-element-spacing-vertical:.75rem;--form-element-spacing-horizontal:1rem;--group-shadow:0 0 0 transparent;--group-shadow-focus-with-button:0 0 0 var(--outline-width) var(--color-primary-focus);--group-shadow-focus-with-input:0 0 0 .0625rem var(--form-border-color);--nav-link-spacing:calc(var(--spacing) * .5);--nav-breadcrumb-divider:">";--sidebar-width:25%}:host{--font-family-emoji:"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-family-sans-serif:system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif, var(--font-family-emoji);--font-family-monospace:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace, var(--font-family-emoji);--font-family:var(--font-family-sans-serif);--line-height:1.5;--font-weight:400;--font-size:100%;--text-underline-offset:.1rem;--border-radius:.25rem;--border-width:.0625rem;--outline-width:.125rem;--transition:.2s ease-in-out;--base-spacing:1rem;--responsive-multiplier:1;--spacing:calc(var(--base-spacing) * var(--responsive-multiplier));--typography-spacing-vertical:1rem;--grid-column-gap:var(--spacing);--grid-row-gap:var(--spacing);--form-element-spacing-vertical:.75rem;--form-element-spacing-horizontal:1rem;--group-shadow:0 0 0 transparent;--group-shadow-focus-with-button:0 0 0 var(--outline-width) var(--color-primary-focus);--group-shadow-focus-with-input:0 0 0 .0625rem var(--form-border-color);--nav-link-spacing:calc(var(--spacing) * .5);--nav-breadcrumb-divider:">";--sidebar-width:25%}@media (width>=576px){:root{--font-size:106.25%;--sidebar-width:max(25%, 150px);--responsive-multiplier:1.25;--spacing:calc(var(--base-spacing) * var(--responsive-multiplier));--nav-link-spacing:calc(var(--spacing) * .5)}:host{--font-size:106.25%;--sidebar-width:max(25%, 150px);--responsive-multiplier:1.25;--spacing:calc(var(--base-spacing) * var(--responsive-multiplier));--nav-link-spacing:calc(var(--spacing) * .5)}}@media (width>=768px){:root{--font-size:112.5%;--sidebar-width:max(22%, 180px);--responsive-multiplier:1.5;--spacing:calc(var(--base-spacing) * var(--responsive-multiplier));--nav-link-spacing:calc(var(--spacing) * .5)}:host{--font-size:112.5%;--sidebar-width:max(22%, 180px);--responsive-multiplier:1.5;--spacing:calc(var(--base-spacing) * var(--responsive-multiplier));--nav-link-spacing:calc(var(--spacing) * .5)}}@media (width>=1024px){:root{--font-size:118.75%;--sidebar-width:max(20%, 200px);--responsive-multiplier:1.75;--spacing:calc(var(--base-spacing) * var(--responsive-multiplier));--nav-link-spacing:calc(var(--spacing) * .5)}:host{--font-size:118.75%;--sidebar-width:max(20%, 200px);--responsive-multiplier:1.75;--spacing:calc(var(--base-spacing) * var(--responsive-multiplier));--nav-link-spacing:calc(var(--spacing) * .5)}}@media (width>=1280px){:root{--font-size:125%;--sidebar-width:max(18%, 220px);--responsive-multiplier:2;--spacing:calc(var(--base-spacing) * var(--responsive-multiplier));--nav-link-spacing:calc(var(--spacing) * .5)}:host{--font-size:125%;--sidebar-width:max(18%, 220px);--responsive-multiplier:2;--spacing:calc(var(--base-spacing) * var(--responsive-multiplier));--nav-link-spacing:calc(var(--spacing) * .5)}}@media (width>=1536px){:root{--font-size:131.25%;--sidebar-width:clamp(240px, 16%, 300px);--responsive-multiplier:2.25;--spacing:calc(var(--base-spacing) * var(--responsive-multiplier));--nav-link-spacing:calc(var(--spacing) * .5)}:host{--font-size:131.25%;--sidebar-width:clamp(240px, 16%, 300px);--responsive-multiplier:2.25;--spacing:calc(var(--base-spacing) * var(--responsive-multiplier));--nav-link-spacing:calc(var(--spacing) * .5)}}
1
+ :root{--font-family-emoji:"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-family-sans-serif:system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif, var(--font-family-emoji);--font-family-monospace:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace, var(--font-family-emoji);--font-family:var(--font-family-sans-serif);--line-height:1.5;--font-weight:400;--font-size:100%;--text-underline-offset:.1rem;--radius:.25rem;--border-size:.0625rem;--outline-size:.125rem;--transition:.2s ease-in-out;--base-spacing:1rem;--spacing:var(--base-spacing);--typography-spacing-vertical:1rem;--input-spacing-vertical:.75rem;--input-spacing-horizontal:1rem;--group-shadow:0 0 0 transparent;--group-shadow-focus-button:0 0 0 var(--outline-size) var(--color-primary-focus-ring);--group-shadow-focus-input:0 0 0 .0625rem var(--input-border);--nav-link-gap:calc(var(--spacing) * .5);--nav-breadcrumb-divider:">";--sidebar-size:25%}:host{--font-family-emoji:"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-family-sans-serif:system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif, var(--font-family-emoji);--font-family-monospace:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace, var(--font-family-emoji);--font-family:var(--font-family-sans-serif);--line-height:1.5;--font-weight:400;--font-size:100%;--text-underline-offset:.1rem;--radius:.25rem;--border-size:.0625rem;--outline-size:.125rem;--transition:.2s ease-in-out;--base-spacing:1rem;--spacing:var(--base-spacing);--typography-spacing-vertical:1rem;--input-spacing-vertical:.75rem;--input-spacing-horizontal:1rem;--group-shadow:0 0 0 transparent;--group-shadow-focus-button:0 0 0 var(--outline-size) var(--color-primary-focus-ring);--group-shadow-focus-input:0 0 0 .0625rem var(--input-border);--nav-link-gap:calc(var(--spacing) * .5);--nav-breadcrumb-divider:">";--sidebar-size:25%}@media (width>=576px){:root{--font-size:106.25%;--sidebar-size:max(25%, 150px);--spacing:calc(var(--base-spacing) * 1.25)}:host{--font-size:106.25%;--sidebar-size:max(25%, 150px);--spacing:calc(var(--base-spacing) * 1.25)}}@media (width>=768px){:root{--font-size:112.5%;--sidebar-size:max(22%, 180px);--spacing:calc(var(--base-spacing) * 1.5)}:host{--font-size:112.5%;--sidebar-size:max(22%, 180px);--spacing:calc(var(--base-spacing) * 1.5)}}@media (width>=1024px){:root{--font-size:118.75%;--sidebar-size:max(20%, 200px);--spacing:calc(var(--base-spacing) * 1.75)}:host{--font-size:118.75%;--sidebar-size:max(20%, 200px);--spacing:calc(var(--base-spacing) * 1.75)}}@media (width>=1280px){:root{--font-size:125%;--sidebar-size:max(18%, 220px);--spacing:calc(var(--base-spacing) * 2)}:host{--font-size:125%;--sidebar-size:max(18%, 220px);--spacing:calc(var(--base-spacing) * 2)}}@media (width>=1536px){:root{--font-size:131.25%;--sidebar-size:clamp(240px, 16%, 300px);--spacing:calc(var(--base-spacing) * 2.25)}:host{--font-size:131.25%;--sidebar-size:clamp(240px, 16%, 300px);--spacing:calc(var(--base-spacing) * 2.25)}}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@semanticus/semanticus-css",
3
- "version": "0.9.0",
3
+ "version": "1.0.0",
4
4
  "description": "lightweight CSS framework that prioritizes semantic HTML and ARIA-focused accessibility, with a small set of atomic utilities",
5
5
  "author": "Joao Goncalves",
6
6
  "style": "./dist/semanticus.css",
@@ -9,7 +9,9 @@
9
9
  "jsdelivr": "./dist/semanticus.css",
10
10
  "exports": {
11
11
  ".": "./dist/semanticus.css",
12
+ "./no-utilities": "./dist/semanticus-no-utilities.css",
12
13
  "./semantics": "./dist/semanticus-semantics.css",
14
+ "./utilities": "./dist/semanticus-utilities.css",
13
15
  "./palettes/*": "./dist/semanticus.palette.*.css",
14
16
  "./sizes/*": "./dist/semanticus.size.*.css",
15
17
  "./src/*": "./src/*",
@@ -64,38 +66,45 @@
64
66
  ],
65
67
  "devDependencies": {
66
68
  "@playwright/test": "^1.59.1",
67
- "@storybook/addon-docs": "^10.3.6",
68
- "@storybook/html": "^10.3.5",
69
- "@storybook/html-vite": "^10.3.5",
69
+ "@storybook/addon-docs": "^10.4.0",
70
+ "@storybook/html-vite": "^10.4.0",
70
71
  "@types/node": "^25.6.0",
71
72
  "browserslist": "^4.28.2",
72
73
  "highlight.js": "^11.11.1",
73
74
  "lightningcss": "^1.32.0",
74
75
  "lightningcss-cli": "^1.32.0",
75
- "storybook": "^10.3.5",
76
+ "storybook": "^10.4.0",
76
77
  "stylelint": "^17.7.0",
77
78
  "stylelint-config-standard": "^40.0.0",
79
+ "tsx": "^4.21.0",
78
80
  "vitepress": "^2.0.0-alpha.17"
79
81
  },
80
82
  "scripts": {
81
- "start": "npm run build && npm run storybook",
83
+ "start": "npm run build && npm run docs:dev",
84
+ "dev": "npm run storybook",
82
85
  "lint": "stylelint \"src/**/*.css\"",
83
86
  "lint:fix": "stylelint \"src/**/*.css\" --fix",
84
87
  "check": "npm run lint && npm run build",
85
88
  "storybook": "storybook dev -p 6006",
86
- "test:visual-regression": "npx playwright test",
89
+ "demo:server": "tsx --tsconfig scripts/tsconfig.json scripts/demo-server.ts",
90
+ "test": "npx playwright test",
87
91
  "test:update-snapshots": "npx playwright test -u",
92
+ "kill-zombies": "sh -c 'PORT=${PORT:-4000}; pids=$(lsof -t -i :$PORT); if [ -n \"$pids\" ]; then echo \"Killing PIDs: $pids\"; kill -9 $pids; else echo \"No processes listening on port $PORT\"; fi'",
93
+ "kill-playwright": "sh -c 'pgrep -af playwright | awk \"{print $1}\" | xargs -r kill -9 || true'",
88
94
  "prepublishOnly": "npm run lint && npm run build",
89
- "release:sync-versions": "node scripts/sync-version-references.js",
90
- "build": "npm run build:css && npm run build:palettes && npm run build:sizes && npm run build:update-size-claims",
91
- "build:css": "npm run build:full && npm run build:semantics",
95
+ "release:sync-versions": "tsx --tsconfig scripts/tsconfig.json scripts/sync-version-references.ts",
96
+ "build": "npm run build:css && npm run build:palettes && npm run build:sizes",
97
+ "build:css": "npm run build:full && npm run build:standard && npm run build:semantics && npm run build:utilities",
92
98
  "build:full": "lightningcss --bundle --minify --browserslist src/index.css -o dist/semanticus.css --custom-media",
99
+ "build:standard": "lightningcss --bundle --minify --browserslist src/no-utilities.css -o dist/semanticus-no-utilities.css --custom-media",
93
100
  "build:semantics": "lightningcss --bundle --minify --browserslist src/semantics/index.css -o dist/semanticus-semantics.css --custom-media",
94
- "build:palettes": "node scripts/build-palettes.js",
95
- "build:sizes": "node scripts/build-sizes.js",
96
- "build:update-size-claims": "node scripts/update-size-claims.js",
97
- "docs:dev": "npm run build && vitepress dev docs",
101
+ "build:utilities": "lightningcss --bundle --minify --browserslist src/utilities/index.css -o dist/semanticus-utilities.css --custom-media",
102
+ "build:palettes": "tsx --tsconfig scripts/tsconfig.json scripts/build-palettes.ts",
103
+ "build:sizes": "tsx --tsconfig scripts/tsconfig.json scripts/build-sizes.ts",
104
+ "docs:dev": "vitepress dev docs",
98
105
  "docs:build": "npm run build && vitepress build docs",
99
- "docs:preview": "npm run build && vitepress preview docs"
106
+ "docs:preview": "npm run docs:build && vitepress preview docs",
107
+ "docs:generate-comparison-table": "tsx --tsconfig scripts/tsconfig.json scripts/generate-comparison-table.ts",
108
+ "docs:update-size-claims": "npm run build && npm run docs:generate-comparison-table && tsx --tsconfig scripts/tsconfig.json scripts/update-size-claims.ts"
100
109
  }
101
110
  }
@@ -0,0 +1,84 @@
1
+ .card,
2
+ .pane,
3
+ .panel {
4
+ --shadow: var(--dialog-shadow);
5
+ --color-background: var(--dialog-fill);
6
+ --border-color: var(--dialog-border);
7
+
8
+ padding-block: var(--spacing);
9
+ padding-inline: var(--spacing);
10
+ margin-bottom: var(--spacing);
11
+ border-radius: var(--radius);
12
+ border: var(--border-size) solid var(--border-color);
13
+ background: var(--color-background);
14
+ box-shadow: var(--shadow);
15
+ position: relative;
16
+
17
+ > header,
18
+ > footer {
19
+ width: auto;
20
+ margin-inline: calc(var(--spacing) * -1);
21
+ padding-inline: var(--spacing);
22
+ background-color: var(--dialog-section-fill);
23
+ }
24
+
25
+ > header {
26
+ margin-top: calc(var(--spacing) * -1);
27
+ border-bottom: var(--border-size) solid var(--dialog-section-border);
28
+ border-top-right-radius: var(--radius);
29
+ border-top-left-radius: var(--radius);
30
+ }
31
+
32
+ > footer {
33
+ margin-bottom: calc(var(--spacing) * -1);
34
+ border-top: var(--border-size) solid var(--dialog-section-border);
35
+ border-bottom-right-radius: var(--radius);
36
+ border-bottom-left-radius: var(--radius);
37
+ display: flex;
38
+ justify-content: end;
39
+ gap: calc(var(--nav-link-gap) * 1.5);
40
+ }
41
+
42
+ > :last-child:is(hgroup) {
43
+ margin-bottom: 0;
44
+ }
45
+
46
+ /* Close button styling */
47
+ [rel="prev"] {
48
+ margin: 0;
49
+ padding: 0;
50
+ position: absolute;
51
+ display: block;
52
+ width: 1rem;
53
+ height: 1rem;
54
+ top: var(--spacing);
55
+ right: var(--spacing);
56
+ border: none;
57
+ border-radius: 0;
58
+ background-image: var(--icon-close);
59
+ background-position: center;
60
+ background-size: auto 1rem;
61
+ background-repeat: no-repeat;
62
+ background-color: transparent;
63
+ box-shadow: none;
64
+ opacity: 0.5;
65
+ transition: opacity var(--transition);
66
+
67
+ &:hover {
68
+ opacity: 1;
69
+ }
70
+ }
71
+ }
72
+
73
+ .pane,
74
+ .panel {
75
+ --dialog-shadow: none;
76
+ --shadow: none;
77
+ }
78
+
79
+ .pane {
80
+ --dialog-border: transparent;
81
+ --border-color: transparent;
82
+
83
+ border-radius: 0;
84
+ }
@@ -12,11 +12,9 @@ aside.sidebar {
12
12
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
13
13
 
14
14
  &:popover-open {
15
- --color-background: var(--color-body-bg);
16
-
17
15
  display: flex !important;
18
16
  width: 60% !important;
19
- box-shadow: var(--pane-shadow);
17
+ box-shadow: var(--shadow);
20
18
  background-color: var(--color-background) !important;
21
19
  left: 0;
22
20
  right: unset;
@@ -28,8 +26,8 @@ aside.sidebar {
28
26
  }
29
27
 
30
28
  &::backdrop {
31
- backdrop-filter: var(--backdrop-overlay-filter);
32
- background-color: var(--backdrop-overlay-bg);
29
+ backdrop-filter: blur(0.375rem);
30
+ background-color: var(--dialog-overlay);
33
31
  transition: backdrop-filter 0.2s ease-in-out, background-color 0.2s ease-in-out;
34
32
  }
35
33
  }
@@ -0,0 +1,2 @@
1
+ @import "./_card.css";
2
+ @import "./_sidebar.css";
package/src/index.css CHANGED
@@ -1,11 +1,9 @@
1
1
  /*!
2
- * Semanticus CSS v0.8.0 (https://semanticus.design/)
2
+ * Semanticus CSS v0.9.0 (https://semanticus.design/)
3
3
  *
4
- * A ARIA-centric, semantic HTML — enhanced by atomic utilities
4
+ * A ARIA-centric, semantic HTML — enhanced with components and variants and utilities
5
5
  *
6
- * Original works:
7
- * - Pico CSS: Copyright (c) 2019-2024 Pico CSS - https://picocss.com
8
- * - Bootstrap Utilities: Copyright (c) 2011-2026 The Bootstrap Authors - https://getbootstrap.com
6
+ * Original works: see https://github.com/semanticus/semanticus-css/blob/main/NOTICE for copyright and license details
9
7
  *
10
8
  * Modifications: Copyright (c) 2026 Joao Goncalves
11
9
  * Licensed under MIT (https://github.com/semanticus/semanticus-css/blob/main/LICENSE)
@@ -14,14 +12,14 @@
14
12
  /* Global variables */
15
13
  @import './variables/_all.css';
16
14
 
17
- /* Normalize */
18
- @import './_normalize.css';
19
-
20
15
  /* Semantics */
21
16
  @import './semantics/modules.css';
22
17
 
23
- /* Utilities */
24
- @import './utilities/modules.css';
18
+ /* Components */
19
+ @import './components/modules.css';
25
20
 
26
21
  /* Variants */
27
22
  @import './variants/modules.css';
23
+
24
+ /* Utilities */
25
+ @import './utilities/modules.css';
@@ -0,0 +1,22 @@
1
+ /*!
2
+ * Semanticus CSS v0.9.0 (https://semanticus.design/)
3
+ *
4
+ * A ARIA-centric, semantic HTML — enhanced by components and variants (no utilities)
5
+ *
6
+ * Original works: see https://github.com/semanticus/semanticus-css/blob/main/NOTICE for copyright and license details
7
+ *
8
+ * Modifications: Copyright (c) 2026 Joao Goncalves
9
+ * Licensed under MIT (https://github.com/semanticus/semanticus-css/blob/main/LICENSE)
10
+ */
11
+
12
+ /* Global variables */
13
+ @import './variables/_all.css';
14
+
15
+ /* Semantics */
16
+ @import './semantics/modules.css';
17
+
18
+ /* Components */
19
+ @import './components/modules.css';
20
+
21
+ /* Variants */
22
+ @import './variants/modules.css';
@@ -1,56 +1,31 @@
1
- /*
2
- Semanticus CSS Palette: Amber
3
- Overrides primary color variables for the amber palette
4
- */
1
+ :root,
2
+ :host {
3
+ /* --color-amber-950: #161003; */
4
+ /* --color-amber-900: #231a03; */
5
+ /* --color-amber-850: #312302; */
6
+ /* --color-amber-800: #3f2d00; */
7
+ /* --color-amber-750: #4d3700; */
8
+ /* --color-amber-700: #5b4200; */
9
+ /* --color-amber-650: #694d00; */
10
+ /* --color-amber-600: #785800; */
11
+ --color-amber-550: #876400;
12
+ /* --color-amber-500: #977000; */
13
+ /* --color-amber-450: #a77c00; */
14
+ /* --color-amber-400: #b78800; */
15
+ --color-amber-350: #c79400;
16
+ /* --color-amber-300: #d8a100; */
17
+ /* --color-amber-250: #e8ae01; */
18
+ --color-amber-200: #ffbf00;
19
+ /* --color-amber-150: #fecc63; */
20
+ /* --color-amber-100: #fddea6; */
21
+ /* --color-amber-50: #fcefd9; */
22
+ /* --color-amber: var(--color-amber-550); */
5
23
 
6
- /* Light theme - Amber */
7
- [data-theme="light"],
8
- :root:not([data-theme="dark"]),
9
- :host(:not([data-theme="dark"])) {
10
- --color-text-selection: rgba(183, 136, 0, 0.25);
11
- --color-primary-rgb: 135, 100, 0;
12
- --color-primary-bg: #ffbf00;
13
- --color-primary-border: var(--color-primary-bg);
14
- --color-primary-underline: rgba(135, 100, 0, 0.5);
15
- --color-primary-hover: #694d00;
16
- --color-primary-hover-bg: #e8ae01;
17
- --color-primary-hover-border: var(--color-primary-hover-bg);
18
- --color-primary-hover-underline: var(--color-primary-hover);
19
- --color-primary-focus: rgba(183, 136, 0, 0.5);
20
- --color-primary-inverse: #000;
21
- --switch-thumb-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
22
- }
23
-
24
- /* Dark theme - Amber */
25
- @media only screen and (prefers-color-scheme: dark) {
26
- :root:not([data-theme]),
27
- :host(:not([data-theme])) {
28
- --color-text-selection: rgba(199, 148, 0, 0.1875);
29
- --color-primary-rgb: 199, 148, 0;
30
- --color-primary-bg: #ffbf00;
31
- --color-primary-border: var(--color-primary-bg);
32
- --color-primary-underline: rgba(199, 148, 0, 0.5);
33
- --color-primary-hover: #e8ae01;
34
- --color-primary-hover-bg: #fecc63;
35
- --color-primary-hover-border: var(--color-primary-hover-bg);
36
- --color-primary-hover-underline: var(--color-primary-hover);
37
- --color-primary-focus: rgba(199, 148, 0, 0.375);
38
- --color-primary-inverse: #000;
39
- --switch-thumb-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
40
- }
41
- }
24
+ /* System tokens */
25
+ --color-primary-text: light-dark(var(--color-amber-550), var(--color-amber-350));
26
+ --color-primary-fill: var(--color-amber-200);
27
+ --color-primary-on-fill: black;
42
28
 
43
- [data-theme="dark"] {
44
- --color-text-selection: rgba(199, 148, 0, 0.1875);
45
- --color-primary-rgb: 199, 148, 0;
46
- --color-primary-bg: #ffbf00;
47
- --color-primary-border: var(--color-primary-bg);
48
- --color-primary-underline: rgba(199, 148, 0, 0.5);
49
- --color-primary-hover: #e8ae01;
50
- --color-primary-hover-bg: #fecc63;
51
- --color-primary-hover-border: var(--color-primary-hover-bg);
52
- --color-primary-hover-underline: var(--color-primary-hover);
53
- --color-primary-focus: rgba(199, 148, 0, 0.375);
54
- --color-primary-inverse: #000;
55
- --switch-thumb-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
29
+ /* Component tokens */
30
+ --switch-thumb-glow: light-dark(0 0 0.5rem oklch(0% 0 0deg / 0.25), 0 0 0.5rem oklch(0% 0 0deg / 0.25));
56
31
  }
@@ -0,0 +1,31 @@
1
+ :root,
2
+ :host {
3
+ /* --color-azure-950: #04121d; */
4
+ /* --color-azure-900: #061e2f; */
5
+ /* --color-azure-850: #052940; */
6
+ /* --color-azure-800: #033452; */
7
+ /* --color-azure-750: #014063; */
8
+ /* --color-azure-700: #014c75; */
9
+ /* --color-azure-650: #015887; */
10
+ /* --color-azure-600: #02659a; */
11
+ --color-azure-550: #0172ad;
12
+ /* --color-azure-500: #017fc0; */
13
+ /* --color-azure-450: #018cd4; */
14
+ /* --color-azure-400: #029ae8; */
15
+ --color-azure-350: #01aaff;
16
+ /* --color-azure-300: #51b4ff; */
17
+ /* --color-azure-250: #79c0ff; */
18
+ /* --color-azure-200: #9bccfd; */
19
+ /* --color-azure-150: #b7d9fc; */
20
+ /* --color-azure-100: #d1e5fb; */
21
+ /* --color-azure-50: #e9f2fc; */
22
+ /* --color-azure: var(--color-azure-550); */
23
+
24
+ /* System tokens */
25
+ --color-primary-text: light-dark(var(--color-azure-550), var(--color-azure-350));
26
+ --color-primary-fill: var(--color-azure-550);
27
+ --color-primary-on-fill: white;
28
+
29
+ /* Component tokens */
30
+ --switch-thumb-glow: light-dark(0 0 0 oklch(0% 0 0deg / 0), 0 0 0.5rem oklch(0% 0 0deg / 0.25));
31
+ }