@birdycom/omniacss 0.11.0 → 0.11.2

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 (48) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +44 -44
  3. package/dist/oc-theme.css +1 -1
  4. package/dist/omnia.css +2 -1
  5. package/dist/omnia.min.css +1 -1
  6. package/dist/omnia.starter.css +2 -0
  7. package/dist/omnia.starter.min.css +1 -1
  8. package/dist/tokens/omnia.dtcg.json +2 -2
  9. package/dist/tokens/omnia.tokens.json +1 -1
  10. package/dist/tokens/omnia_tokens.py +2 -2
  11. package/package.json +63 -63
  12. package/scss/utilities/_anchor_positioning.scss +65 -65
  13. package/scss/utilities/_animation_properties.scss +143 -143
  14. package/scss/utilities/_borders_extended.scss +97 -97
  15. package/scss/utilities/_borders_outlines.scss +161 -161
  16. package/scss/utilities/_containment.scss +82 -82
  17. package/scss/utilities/_css_functions.scss +34 -34
  18. package/scss/utilities/_dark_mode.scss +117 -117
  19. package/scss/utilities/_drop_shadow_colors.scss +26 -26
  20. package/scss/utilities/_experimental_css.scss +149 -149
  21. package/scss/utilities/_flexbox.scss +317 -317
  22. package/scss/utilities/_font_variants.scss +139 -139
  23. package/scss/utilities/_gap.scss +103 -103
  24. package/scss/utilities/_gradient_stops.scss +48 -48
  25. package/scss/utilities/_grid.scss +672 -672
  26. package/scss/utilities/_layout_extras.scss +171 -171
  27. package/scss/utilities/_layout_flow.scss +210 -210
  28. package/scss/utilities/_mask_extras.scss +62 -62
  29. package/scss/utilities/_motion_transforms.scss +167 -167
  30. package/scss/utilities/_scroll_animations.scss +80 -80
  31. package/scss/utilities/_scrollbar.scss +2 -1
  32. package/scss/utilities/_shadow_tokens.scss +21 -21
  33. package/scss/utilities/_shapes.scss +72 -72
  34. package/scss/utilities/_sizing_logical.scss +99 -99
  35. package/scss/utilities/_starting_style.scss +53 -53
  36. package/scss/utilities/_state_variants.scss +196 -196
  37. package/scss/utilities/_svg.scss +100 -100
  38. package/scss/utilities/_table_advanced.scss +19 -19
  39. package/scss/utilities/_typography_advanced.scss +124 -124
  40. package/scss/utilities/_typography_modern.scss +83 -83
  41. package/scss/utilities/_view_transitions.scss +64 -64
  42. package/scss/utilities/_writing_modes.scss +72 -72
  43. package/scss/variables/_hulp.scss +107 -107
  44. package/scss/variables/_variables_effects.scss +108 -108
  45. package/src/postcss.mjs +43 -43
  46. package/src/tokens.mjs +377 -377
  47. package/src/variants.mjs +278 -278
  48. package/tokens/semantic.json +80 -80
package/tokens/semantic.json CHANGED
@@ -1,80 +1,80 @@
1
- {
2
- "$description": "OmniaCSS semantic theme tokens: the single source for dist/oc-theme.css (web) and the desktop export (npx omniacss tokens). Colors are Omnia palette names (--color-<name>-<step> in oc-colors.css), '@token' references, or { color, alpha }. Light first, dark second.",
3
- "color": {
4
- "brand-1": { "group": "Brand", "value": { "light": "teal-80", "dark": "skycyan-60" } },
5
- "brand-2": { "group": "Brand", "value": { "light": "blue-40", "dark": "blue-10" } },
6
- "brand-3": { "group": "Brand", "value": { "light": "purple-40", "dark": "purple-10" } },
7
-
8
- "background": { "group": "Core surfaces", "value": { "light": "frostblue-2", "dark": "shallowblue-95" }, "use": "page / window background" },
9
- "foreground": { "group": "Core surfaces", "value": { "light": "duskblue-60", "dark": "frostblue-10" }, "use": "body text" },
10
- "muted": { "group": "Core surfaces", "value": { "light": "frostblue-60", "dark": "shallowblue-50" }, "use": "table headers, tabs, scrollbars" },
11
- "muted-foreground": { "group": "Core surfaces", "value": { "light": "stormblue-40", "dark": "mistblue-70" }, "use": "secondary text, status lines" },
12
- "card": { "group": "Core surfaces", "value": { "light": "white-50", "dark": "shallowblue-70" }, "use": "cards, tables, inputs, buttons" },
13
- "popover": { "group": "Core surfaces", "value": { "light": "white-50", "dark": "shallowblue-60" }, "use": "menus, popovers, tooltips" },
14
- "popover-foreground": { "group": "Core surfaces", "value": "@foreground" },
15
- "surface": { "group": "Core surfaces", "value": { "light": { "color": "stormblue-50", "alpha": 0.04 }, "dark": { "color": "white-50", "alpha": 0.04 } }, "use": "subtle tinted area" },
16
- "surface-strong": { "group": "Core surfaces", "value": { "light": { "color": "stormblue-50", "alpha": 0.08 }, "dark": { "color": "white-50", "alpha": 0.07 } } },
17
-
18
- "primary": { "group": "Semantic accents", "value": { "light": "vividblue-95", "dark": "vividblue-100" }, "use": "accent button, focus" },
19
- "primary-foreground": { "group": "Semantic accents", "value": { "light": "white-50", "dark": "shallowblue-95" }, "use": "text on primary" },
20
- "secondary": { "group": "Semantic accents", "value": "@muted" },
21
- "secondary-foreground": { "group": "Semantic accents", "value": "@foreground" },
22
- "accent": { "group": "Semantic accents", "value": "@muted" },
23
- "accent-foreground": { "group": "Semantic accents", "value": "@foreground" },
24
- "destructive": { "group": "Semantic accents", "value": { "light": "red-70", "dark": "red-50" } },
25
- "destructive-foreground": { "group": "Semantic accents", "value": "white-50" },
26
- "success": { "group": "Semantic accents", "value": { "light": "green-60", "dark": "green-2" } },
27
- "success-foreground": { "group": "Semantic accents", "value": { "light": "white-50", "dark": "shallowblue-95" } },
28
- "warning": { "group": "Semantic accents", "value": { "light": "orange-95", "dark": "orange-50" } },
29
- "warning-foreground": { "group": "Semantic accents", "value": { "light": "white-50", "dark": "shallowblue-95" } },
30
-
31
- "border": { "group": "Borders and inputs", "value": { "light": "frostblue-80", "dark": "duskblue-30" } },
32
- "border-strong": { "group": "Borders and inputs", "value": { "light": "mistblue-80", "dark": "stormblue-30" } },
33
- "input": { "group": "Borders and inputs", "value": "@border" },
34
- "ring": { "group": "Borders and inputs", "value": "@primary" },
35
-
36
- "row-alt": { "group": "Interaction states", "value": { "light": "frostblue-2", "dark": "shallowblue-100" }, "use": "zebra rows in tables and lists (other rows: card)" },
37
- "hover": { "group": "Interaction states", "value": { "light": "frostblue-100", "dark": "duskblue-50" }, "use": "hovered button, row or menu item" },
38
- "pressed": { "group": "Interaction states", "value": { "light": "frostblue-60", "dark": "duskblue-40" }, "use": "pressed button or row" },
39
- "selected": { "group": "Interaction states", "value": { "light": "mistblue-2", "dark": "stormblue-60" }, "use": "selected row or item, separate from the primary button color" },
40
- "selected-foreground": { "group": "Interaction states", "value": "@foreground", "use": "text on selected" },
41
- "disabled-foreground": { "group": "Interaction states", "value": { "light": "duskblue-2", "dark": "duskblue-10" }, "use": "disabled buttons and menu items" }
42
- },
43
- "gradient": {
44
- "brand": { "angle": 100, "stops": [{ "color": "brand-1" }, { "color": "brand-2", "at": 50 }, { "color": "brand-3" }] }
45
- },
46
- "size": {
47
- "radius": { "rem": 0.5 },
48
- "focus-width": { "px": 2 }
49
- },
50
- "text": {
51
- "xs": { "px": 12 },
52
- "sm": { "px": 13 },
53
- "base": { "px": 15 },
54
- "lg": { "px": 18 },
55
- "xl": { "px": 24 }
56
- },
57
- "font": {
58
- "sans": {
59
- "css": "system-ui, -apple-system, \"Segoe UI\", Roboto, Cantarell, \"Helvetica Neue\", sans-serif",
60
- "windows": "Segoe UI",
61
- "macos": ".AppleSystemUIFont",
62
- "linux": "Cantarell"
63
- },
64
- "mono": {
65
- "css": "\"Cascadia Code\", \"JetBrains Mono\", Consolas, ui-monospace, monospace",
66
- "windows": "Consolas",
67
- "macos": "Menlo",
68
- "linux": "DejaVu Sans Mono"
69
- }
70
- },
71
- "transition": {
72
- "fast": { "ms": 150, "easing": "cubic-bezier(0.4, 0, 0.2, 1)" },
73
- "normal": { "ms": 200, "easing": "cubic-bezier(0.4, 0, 0.2, 1)" }
74
- },
75
- "shadow": {
76
- "sm": { "x": 0, "y": 1, "blur": 2, "spread": 0, "color": { "light": "stormblue-50", "dark": "black-50" }, "alpha": { "light": 0.08, "dark": 0.4 } },
77
- "md": { "x": 0, "y": 4, "blur": 12, "spread": -2, "color": { "light": "stormblue-50", "dark": "black-50" }, "alpha": { "light": 0.12, "dark": 0.5 } },
78
- "lg": { "x": 0, "y": 12, "blur": 32, "spread": -6, "color": { "light": "stormblue-50", "dark": "black-50" }, "alpha": { "light": 0.16, "dark": 0.6 } }
79
- }
80
- }
1
+ {
2
+ "$description": "OmniaCSS semantic theme tokens: the single source for dist/oc-theme.css (web) and the desktop export (npx omniacss tokens). Colors are Omnia palette names (--color-<name>-<step> in oc-colors.css), '@token' references, or { color, alpha }. Light first, dark second.",
3
+ "color": {
4
+ "brand-1": { "group": "Brand", "value": { "light": "teal-80", "dark": "skycyan-60" } },
5
+ "brand-2": { "group": "Brand", "value": { "light": "blue-40", "dark": "blue-10" } },
6
+ "brand-3": { "group": "Brand", "value": { "light": "purple-40", "dark": "purple-10" } },
7
+
8
+ "background": { "group": "Core surfaces", "value": { "light": "frostblue-2", "dark": "shallowblue-95" }, "use": "page / window background" },
9
+ "foreground": { "group": "Core surfaces", "value": { "light": "duskblue-60", "dark": "frostblue-10" }, "use": "body text" },
10
+ "muted": { "group": "Core surfaces", "value": { "light": "frostblue-60", "dark": "shallowblue-50" }, "use": "table headers, tabs, scrollbars" },
11
+ "muted-foreground": { "group": "Core surfaces", "value": { "light": "stormblue-40", "dark": "mistblue-70" }, "use": "secondary text, status lines" },
12
+ "card": { "group": "Core surfaces", "value": { "light": "white-50", "dark": "shallowblue-70" }, "use": "cards, tables, inputs, buttons" },
13
+ "popover": { "group": "Core surfaces", "value": { "light": "white-50", "dark": "shallowblue-60" }, "use": "menus, popovers, tooltips" },
14
+ "popover-foreground": { "group": "Core surfaces", "value": "@foreground" },
15
+ "surface": { "group": "Core surfaces", "value": { "light": { "color": "stormblue-50", "alpha": 0.04 }, "dark": { "color": "white-50", "alpha": 0.04 } }, "use": "subtle tinted area" },
16
+ "surface-strong": { "group": "Core surfaces", "value": { "light": { "color": "stormblue-50", "alpha": 0.08 }, "dark": { "color": "white-50", "alpha": 0.07 } } },
17
+
18
+ "primary": { "group": "Semantic accents", "value": { "light": "vividblue-95", "dark": "vividblue-100" }, "use": "accent button, focus" },
19
+ "primary-foreground": { "group": "Semantic accents", "value": { "light": "white-50", "dark": "shallowblue-95" }, "use": "text on primary" },
20
+ "secondary": { "group": "Semantic accents", "value": "@muted" },
21
+ "secondary-foreground": { "group": "Semantic accents", "value": "@foreground" },
22
+ "accent": { "group": "Semantic accents", "value": "@muted" },
23
+ "accent-foreground": { "group": "Semantic accents", "value": "@foreground" },
24
+ "destructive": { "group": "Semantic accents", "value": { "light": "red-70", "dark": "red-50" } },
25
+ "destructive-foreground": { "group": "Semantic accents", "value": "white-50" },
26
+ "success": { "group": "Semantic accents", "value": { "light": "green-60", "dark": "green-2" } },
27
+ "success-foreground": { "group": "Semantic accents", "value": { "light": "white-50", "dark": "shallowblue-95" } },
28
+ "warning": { "group": "Semantic accents", "value": { "light": "orange-95", "dark": "orange-50" } },
29
+ "warning-foreground": { "group": "Semantic accents", "value": { "light": "white-50", "dark": "shallowblue-95" } },
30
+
31
+ "border": { "group": "Borders and inputs", "value": { "light": "frostblue-80", "dark": "duskblue-30" } },
32
+ "border-strong": { "group": "Borders and inputs", "value": { "light": "mistblue-80", "dark": "stormblue-30" } },
33
+ "input": { "group": "Borders and inputs", "value": "@border" },
34
+ "ring": { "group": "Borders and inputs", "value": "@primary" },
35
+
36
+ "row-alt": { "group": "Interaction states", "value": { "light": "frostblue-2", "dark": "shallowblue-100" }, "use": "zebra rows in tables and lists (other rows: card)" },
37
+ "hover": { "group": "Interaction states", "value": { "light": "frostblue-100", "dark": "duskblue-50" }, "use": "hovered button, row or menu item" },
38
+ "pressed": { "group": "Interaction states", "value": { "light": "frostblue-60", "dark": "duskblue-40" }, "use": "pressed button or row" },
39
+ "selected": { "group": "Interaction states", "value": { "light": "mistblue-2", "dark": "stormblue-60" }, "use": "selected row or item, separate from the primary button color" },
40
+ "selected-foreground": { "group": "Interaction states", "value": "@foreground", "use": "text on selected" },
41
+ "disabled-foreground": { "group": "Interaction states", "value": { "light": "duskblue-2", "dark": "duskblue-10" }, "use": "disabled buttons and menu items" }
42
+ },
43
+ "gradient": {
44
+ "brand": { "angle": 100, "stops": [{ "color": "brand-1" }, { "color": "brand-2", "at": 50 }, { "color": "brand-3" }] }
45
+ },
46
+ "size": {
47
+ "radius": { "rem": 0.5 },
48
+ "focus-width": { "px": 2 }
49
+ },
50
+ "text": {
51
+ "xs": { "px": 12 },
52
+ "sm": { "px": 13 },
53
+ "base": { "px": 15 },
54
+ "lg": { "px": 18 },
55
+ "xl": { "px": 24 }
56
+ },
57
+ "font": {
58
+ "sans": {
59
+ "css": "system-ui, -apple-system, \"Segoe UI\", Roboto, Cantarell, \"Helvetica Neue\", sans-serif",
60
+ "windows": "Segoe UI",
61
+ "macos": ".AppleSystemUIFont",
62
+ "linux": "Cantarell"
63
+ },
64
+ "mono": {
65
+ "css": "\"Cascadia Code\", \"JetBrains Mono\", Consolas, ui-monospace, monospace",
66
+ "windows": "Consolas",
67
+ "macos": "Menlo",
68
+ "linux": "DejaVu Sans Mono"
69
+ }
70
+ },
71
+ "transition": {
72
+ "fast": { "ms": 150, "easing": "cubic-bezier(0.4, 0, 0.2, 1)" },
73
+ "normal": { "ms": 200, "easing": "cubic-bezier(0.4, 0, 0.2, 1)" }
74
+ },
75
+ "shadow": {
76
+ "sm": { "x": 0, "y": 1, "blur": 2, "spread": 0, "color": { "light": "stormblue-50", "dark": "black-50" }, "alpha": { "light": 0.08, "dark": 0.4 } },
77
+ "md": { "x": 0, "y": 4, "blur": 12, "spread": -2, "color": { "light": "stormblue-50", "dark": "black-50" }, "alpha": { "light": 0.12, "dark": 0.5 } },
78
+ "lg": { "x": 0, "y": 12, "blur": 32, "spread": -6, "color": { "light": "stormblue-50", "dark": "black-50" }, "alpha": { "light": 0.16, "dark": 0.6 } }
79
+ }
80
+ }