@birdycom/omniacss 0.11.0 → 0.11.1

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 (47) 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/tokens/omnia.dtcg.json +2 -2
  8. package/dist/tokens/omnia.tokens.json +1 -1
  9. package/dist/tokens/omnia_tokens.py +2 -2
  10. package/package.json +63 -63
  11. package/scss/utilities/_anchor_positioning.scss +65 -65
  12. package/scss/utilities/_animation_properties.scss +143 -143
  13. package/scss/utilities/_borders_extended.scss +97 -97
  14. package/scss/utilities/_borders_outlines.scss +161 -161
  15. package/scss/utilities/_containment.scss +82 -82
  16. package/scss/utilities/_css_functions.scss +34 -34
  17. package/scss/utilities/_dark_mode.scss +117 -117
  18. package/scss/utilities/_drop_shadow_colors.scss +26 -26
  19. package/scss/utilities/_experimental_css.scss +149 -149
  20. package/scss/utilities/_flexbox.scss +317 -317
  21. package/scss/utilities/_font_variants.scss +139 -139
  22. package/scss/utilities/_gap.scss +103 -103
  23. package/scss/utilities/_gradient_stops.scss +48 -48
  24. package/scss/utilities/_grid.scss +672 -672
  25. package/scss/utilities/_layout_extras.scss +171 -171
  26. package/scss/utilities/_layout_flow.scss +210 -210
  27. package/scss/utilities/_mask_extras.scss +62 -62
  28. package/scss/utilities/_motion_transforms.scss +167 -167
  29. package/scss/utilities/_scroll_animations.scss +80 -80
  30. package/scss/utilities/_scrollbar.scss +2 -1
  31. package/scss/utilities/_shadow_tokens.scss +21 -21
  32. package/scss/utilities/_shapes.scss +72 -72
  33. package/scss/utilities/_sizing_logical.scss +99 -99
  34. package/scss/utilities/_starting_style.scss +53 -53
  35. package/scss/utilities/_state_variants.scss +196 -196
  36. package/scss/utilities/_svg.scss +100 -100
  37. package/scss/utilities/_table_advanced.scss +19 -19
  38. package/scss/utilities/_typography_advanced.scss +124 -124
  39. package/scss/utilities/_typography_modern.scss +83 -83
  40. package/scss/utilities/_view_transitions.scss +64 -64
  41. package/scss/utilities/_writing_modes.scss +72 -72
  42. package/scss/variables/_hulp.scss +107 -107
  43. package/scss/variables/_variables_effects.scss +108 -108
  44. package/src/postcss.mjs +43 -43
  45. package/src/tokens.mjs +377 -377
  46. package/src/variants.mjs +278 -278
  47. 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
+ }