@semanticus/semanticus-css 0.9.0 → 1.1.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.
- package/NOTICE +16 -16
- package/README.md +128 -29
- package/dist/semanticus-no-utilities.css +11 -0
- package/dist/semanticus-semantics.css +3 -4
- package/dist/semanticus-utilities.css +11 -0
- package/dist/semanticus.css +4 -12
- package/dist/semanticus.palette.amber.css +1 -1
- package/dist/semanticus.palette.azure.css +1 -0
- package/dist/semanticus.palette.blue.css +1 -1
- package/dist/semanticus.palette.cyan.css +1 -1
- package/dist/semanticus.palette.fuchsia.css +1 -1
- package/dist/semanticus.palette.green.css +1 -1
- package/dist/semanticus.palette.grey.css +1 -1
- package/dist/semanticus.palette.indigo.css +1 -1
- package/dist/semanticus.palette.jade.css +1 -1
- package/dist/semanticus.palette.lime.css +1 -1
- package/dist/semanticus.palette.orange.css +1 -1
- package/dist/semanticus.palette.pink.css +1 -1
- package/dist/semanticus.palette.pumpkin.css +1 -1
- package/dist/semanticus.palette.purple.css +1 -1
- package/dist/semanticus.palette.red.css +1 -1
- package/dist/semanticus.palette.sand.css +1 -1
- package/dist/semanticus.palette.slate.css +1 -1
- package/dist/semanticus.palette.violet.css +1 -1
- package/dist/semanticus.palette.yellow.css +1 -1
- package/dist/semanticus.palette.zinc.css +1 -1
- package/dist/semanticus.size.pico.css +1 -1
- package/package.json +24 -15
- package/src/components/_card.css +47 -0
- package/src/{variants → components}/_container.css +3 -10
- package/src/components/_icons.css +59 -0
- package/src/components/_pane.css +19 -0
- package/src/{variants → components}/_sidebar.css +3 -5
- package/src/components/modules.css +5 -0
- package/src/index.css +8 -10
- package/src/no-utilities.css +22 -0
- package/src/palettes/amber.css +28 -53
- package/src/palettes/azure.css +31 -0
- package/src/palettes/blue.css +28 -53
- package/src/palettes/cyan.css +28 -53
- package/src/palettes/fuchsia.css +28 -53
- package/src/palettes/green.css +28 -53
- package/src/palettes/grey.css +28 -53
- package/src/palettes/indigo.css +28 -53
- package/src/palettes/jade.css +28 -53
- package/src/palettes/lime.css +28 -53
- package/src/palettes/orange.css +28 -53
- package/src/palettes/pink.css +28 -53
- package/src/palettes/pumpkin.css +28 -53
- package/src/palettes/purple.css +28 -53
- package/src/palettes/red.css +28 -53
- package/src/palettes/sand.css +28 -53
- package/src/palettes/slate.css +28 -53
- package/src/palettes/violet.css +28 -53
- package/src/palettes/yellow.css +28 -53
- package/src/palettes/zinc.css +28 -53
- package/src/semantics/attributes/_aria-busy.css +0 -3
- package/src/semantics/attributes/_aria-disabled.css +25 -0
- package/src/semantics/attributes/_hidden.css +0 -3
- package/src/semantics/attributes/_role-group-search.css +11 -14
- package/src/semantics/attributes/_role-status-alert.css +123 -0
- package/src/semantics/attributes/_role-toolbar.css +2 -5
- package/src/semantics/attributes/_role-tooltip.css +7 -10
- package/src/semantics/elements/_article.css +0 -3
- package/src/semantics/elements/_aside.css +1 -7
- package/src/semantics/elements/_blockquote.css +2 -2
- package/src/semantics/elements/_body.css +1 -4
- package/src/semantics/elements/_button.css +25 -31
- package/src/semantics/elements/_code.css +5 -8
- package/src/semantics/elements/_del.css +1 -1
- package/src/semantics/elements/_details.css +39 -40
- package/src/semantics/elements/_dialog.css +19 -43
- package/src/semantics/elements/_document.css +10 -4
- package/src/semantics/elements/_embedded.css +0 -3
- package/src/semantics/elements/_figure.css +0 -3
- package/src/semantics/elements/_footer.css +0 -3
- package/src/semantics/elements/_header.css +0 -3
- package/src/semantics/elements/_headings.css +7 -17
- package/src/semantics/elements/_hgroup.css +1 -1
- package/src/semantics/elements/_hr.css +1 -4
- package/src/semantics/elements/_input.css +33 -36
- package/src/semantics/elements/_ins.css +1 -1
- package/src/semantics/elements/_links.css +22 -18
- package/src/semantics/elements/_main.css +0 -4
- package/src/semantics/elements/_mark.css +2 -2
- package/src/semantics/elements/_nav.css +5 -8
- package/src/semantics/elements/_progress.css +5 -8
- package/src/semantics/elements/_section.css +0 -3
- package/src/semantics/elements/_small.css +3 -0
- package/src/semantics/elements/_table.css +3 -5
- package/src/semantics/elements/_type-checkbox-radio.css +19 -22
- package/src/semantics/elements/_type-color.css +2 -5
- package/src/semantics/elements/_type-date.css +1 -4
- package/src/semantics/elements/_type-file.css +7 -10
- package/src/semantics/elements/_type-range.css +11 -14
- package/src/semantics/elements/_type-search.css +6 -10
- package/src/semantics/index.css +2 -5
- package/src/semantics/modules.css +3 -7
- package/src/sizes/pico.css +20 -33
- package/src/utilities/_grid.css +306 -0
- package/src/utilities/_variables.css +27 -42
- package/src/utilities/borders/_border-radius.css +54 -79
- package/src/utilities/borders/_border-style.css +15 -5
- package/src/utilities/borders/_border-width.css +0 -28
- package/src/utilities/colors/_bg-colors.css +75 -0
- package/src/utilities/colors/_border-colors.css +17 -39
- package/src/utilities/colors/_subtle-colors.css +145 -0
- package/src/utilities/colors/_text-bg-colors.css +62 -0
- package/src/utilities/colors/_text-colors.css +32 -409
- package/src/utilities/effects/_focus-ring.css +33 -0
- package/src/utilities/effects/_shadows.css +0 -33
- package/src/utilities/index.css +16 -0
- package/src/utilities/layout/_misc.css +2 -5
- package/src/utilities/layout/{_grid.css → _ratio.css} +0 -19
- package/src/utilities/modules.css +9 -3
- package/src/utilities/sizing/_width.css +8 -0
- package/src/utilities/spacing/_gap.css +144 -144
- package/src/utilities/spacing/_margin.css +324 -324
- package/src/utilities/spacing/_padding.css +324 -324
- package/src/utilities/typography/_font-sizes.css +6 -6
- package/src/variables/_all.css +2 -20
- package/src/variables/_elements.css +29 -28
- package/src/variables/_theme.css +336 -0
- package/src/variants/_variables.css +24 -0
- package/src/variants/intent/_contrast.css +47 -0
- package/src/variants/intent/_danger.css +39 -0
- package/src/variants/intent/_info.css +39 -0
- package/src/variants/intent/_primary.css +39 -0
- package/src/variants/intent/_secondary.css +39 -0
- package/src/variants/intent/_success.css +39 -0
- package/src/variants/intent/_warning.css +39 -0
- package/src/variants/modifiers/_ghost.css +164 -0
- package/src/variants/modifiers/_striped.css +11 -0
- package/src/variants/modifiers/_subtle.css +133 -0
- package/src/variants/modules.css +11 -14
- package/src/_normalize.css +0 -214
- package/src/semantics/_misc.css +0 -3
- package/src/utilities/colors/_background-colors.css +0 -248
- package/src/variables/_colors.css +0 -355
- package/src/variables/_components.css +0 -330
- package/src/variables/_icons.css +0 -55
- package/src/variables/_layout.css +0 -123
- package/src/variants/_contained.css +0 -43
- package/src/variants/_contrast.css +0 -61
- package/src/variants/_ghost.css +0 -68
- package/src/variants/_pane-panel-card.css +0 -54
- package/src/variants/_secondary.css +0 -48
- package/src/variants/_striped.css +0 -10
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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;--
|
|
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": "
|
|
3
|
+
"version": "1.1.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.
|
|
68
|
-
"@storybook/html": "^10.
|
|
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.
|
|
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
|
|
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
|
-
"
|
|
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": "
|
|
90
|
-
"build": "npm run build:css && npm run build:palettes && npm run build:sizes
|
|
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:
|
|
95
|
-
"build:
|
|
96
|
-
"build:
|
|
97
|
-
"docs:dev": "
|
|
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,47 @@
|
|
|
1
|
+
.card,
|
|
2
|
+
.pane {
|
|
3
|
+
--shadow: var(--dialog-shadow);
|
|
4
|
+
--color-background: var(--dialog-fill);
|
|
5
|
+
--border-color: var(--dialog-border);
|
|
6
|
+
|
|
7
|
+
padding-block: var(--spacing);
|
|
8
|
+
padding-inline: var(--spacing);
|
|
9
|
+
margin-bottom: var(--spacing);
|
|
10
|
+
border-radius: var(--radius);
|
|
11
|
+
border: var(--border-size) solid var(--border-color);
|
|
12
|
+
background: var(--color-background);
|
|
13
|
+
box-shadow: var(--shadow);
|
|
14
|
+
|
|
15
|
+
> header,
|
|
16
|
+
> footer {
|
|
17
|
+
width: auto;
|
|
18
|
+
margin-inline: calc(var(--spacing) * -1);
|
|
19
|
+
padding-inline: var(--spacing);
|
|
20
|
+
background-color: var(--dialog-section-fill);
|
|
21
|
+
display: flex;
|
|
22
|
+
gap: calc(var(--nav-link-gap) * 1.5);
|
|
23
|
+
align-items: center;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
/* Header styling */
|
|
27
|
+
> header {
|
|
28
|
+
margin-top: calc(var(--spacing) * -1);
|
|
29
|
+
border-bottom: var(--border-size) solid var(--dialog-section-border);
|
|
30
|
+
border-top-right-radius: var(--radius);
|
|
31
|
+
border-top-left-radius: var(--radius);
|
|
32
|
+
justify-content: space-between;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
/* Footer styling */
|
|
36
|
+
> footer {
|
|
37
|
+
margin-bottom: calc(var(--spacing) * -1);
|
|
38
|
+
border-top: var(--border-size) solid var(--dialog-section-border);
|
|
39
|
+
border-bottom-right-radius: var(--radius);
|
|
40
|
+
border-bottom-left-radius: var(--radius);
|
|
41
|
+
justify-content: end;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
> :last-child:is(hgroup, h1, h2, h3, h4, h5, h6) {
|
|
45
|
+
margin-bottom: 0;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
@@ -1,21 +1,14 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Container
|
|
3
|
-
* Responsive width container with horizontal padding
|
|
4
|
-
*/
|
|
5
1
|
.container,
|
|
6
2
|
.container-fluid {
|
|
7
3
|
width: 100%;
|
|
8
|
-
margin-
|
|
9
|
-
|
|
10
|
-
padding-right: var(--spacing);
|
|
11
|
-
padding-left: var(--spacing);
|
|
4
|
+
margin-inline: auto;
|
|
5
|
+
padding-inline: var(--spacing);
|
|
12
6
|
}
|
|
13
7
|
|
|
14
8
|
.container {
|
|
15
9
|
@media (--breakpoint-sm) {
|
|
16
10
|
max-width: 510px;
|
|
17
|
-
padding-
|
|
18
|
-
padding-left: 0;
|
|
11
|
+
padding-inline: calc(var(--spacing) / 2);
|
|
19
12
|
}
|
|
20
13
|
|
|
21
14
|
@media (--breakpoint-md) {
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
/* Base styles shared by all .icon-* classes */
|
|
2
|
+
[class^="icon-"],
|
|
3
|
+
[class*=" icon-"] {
|
|
4
|
+
display: inline-block;
|
|
5
|
+
width: 1em;
|
|
6
|
+
height: 1em;
|
|
7
|
+
margin: 0;
|
|
8
|
+
padding: 0;
|
|
9
|
+
border: none;
|
|
10
|
+
border-radius: 0;
|
|
11
|
+
background-color: currentColor;
|
|
12
|
+
background-image: none;
|
|
13
|
+
mask-position: center;
|
|
14
|
+
mask-size: contain;
|
|
15
|
+
mask-repeat: no-repeat;
|
|
16
|
+
vertical-align: -.199em;
|
|
17
|
+
align-self: center;
|
|
18
|
+
color: inherit;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.icon-checkbox {
|
|
22
|
+
mask-image: var(--icon-checkbox);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.icon-chevron {
|
|
26
|
+
mask-image: var(--icon-chevron);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.icon-close {
|
|
30
|
+
mask-image: var(--icon-close);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.icon-date {
|
|
34
|
+
mask-image: var(--icon-date);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.icon-invalid {
|
|
38
|
+
mask-image: var(--icon-invalid);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.icon-loading {
|
|
42
|
+
mask-image: var(--icon-loading);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.icon-minus {
|
|
46
|
+
mask-image: var(--icon-minus);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.icon-search {
|
|
50
|
+
mask-image: var(--icon-search);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.icon-time {
|
|
54
|
+
mask-image: var(--icon-time);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.icon-valid {
|
|
58
|
+
mask-image: var(--icon-valid);
|
|
59
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/* Please see src/components/_card.css, since .pane shares most of its styling with .card */
|
|
2
|
+
|
|
3
|
+
.pane {
|
|
4
|
+
--dialog-shadow: none;
|
|
5
|
+
--shadow: none;
|
|
6
|
+
--dialog-border: transparent;
|
|
7
|
+
--border-color: transparent;
|
|
8
|
+
--color-background: light-dark(
|
|
9
|
+
color-mix(in srgb, var(--color-slate-50) 25%, white),
|
|
10
|
+
color-mix(in srgb, var(--color-slate-50), transparent 95%)
|
|
11
|
+
);
|
|
12
|
+
--dialog-section-fill: color-mix(in srgb, light-dark(var(--color-slate-900), var(--color-slate-50)), transparent 90%);
|
|
13
|
+
|
|
14
|
+
border-radius: 0;
|
|
15
|
+
|
|
16
|
+
> :is(header, footer) {
|
|
17
|
+
border-radius: 0;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
@@ -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(--
|
|
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:
|
|
32
|
-
background-color: var(--
|
|
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
|
}
|
package/src/index.css
CHANGED
|
@@ -1,11 +1,9 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* Semanticus CSS
|
|
2
|
+
* Semanticus CSS v1.1.0 (https://semanticus.design/)
|
|
3
3
|
*
|
|
4
|
-
* A ARIA-centric, semantic HTML — enhanced
|
|
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
|
-
/*
|
|
24
|
-
@import './
|
|
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';
|
package/src/palettes/amber.css
CHANGED
|
@@ -1,56 +1,31 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
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
|
-
/*
|
|
7
|
-
|
|
8
|
-
:
|
|
9
|
-
:
|
|
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
|
-
|
|
44
|
-
--
|
|
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
|
}
|