@birdycom/omniacss 0.0.0-stage → 0.11.1

package/dist/tokens/omnia_tokens.py

@@ -0,0 +1,189 @@
+# omnia_tokens.py — OmniaCSS 0.11.1 semantic tokens for non-web apps (Tkinter, Qt, ...).
+# Generated by: npx omniacss tokens --format python  (do not edit; regenerate after an OmniaCSS update)
+# Map: OMNIACSS_VERSION -> PALETTES (hex per mode) -> ALPHA -> OKLCH -> SIZES/TEXT -> FONTS -> SHADOWS -> font()
+#
+# Colors are resolved from light-dark(var(--color-...)) and gamut mapped to sRGB the CSS Color 4 way.
+# Tokens with transparency (see ALPHA) are pre-blended over "background" in PALETTES.
+
+OMNIACSS_VERSION = "0.11.1"
+
+PALETTES = {
+    "light": {
+        "brand_1": "#006464",
+        "brand_2": "#0949ff",
+        "brand_3": "#973096",
+        "background": "#f2f6ff",
+        "foreground": "#0d1633",
+        "muted": "#d3d9f1",
+        "muted_foreground": "#42537e",
+        "card": "#ffffff",
+        "popover": "#ffffff",
+        "popover_foreground": "#0d1633",
+        "surface": "#ebeff9",
+        "surface_strong": "#e3e8f4",
+        "primary": "#175dbe",
+        "primary_foreground": "#ffffff",
+        "secondary": "#d3d9f1",
+        "secondary_foreground": "#0d1633",
+        "accent": "#d3d9f1",
+        "accent_foreground": "#0d1633",
+        "destructive": "#df0000",
+        "destructive_foreground": "#ffffff",
+        "success": "#007700",
+        "success_foreground": "#ffffff",
+        "warning": "#9f5d00",
+        "warning_foreground": "#ffffff",
+        "border": "#acb4d6",
+        "border_strong": "#7b8abe",
+        "input": "#acb4d6",
+        "ring": "#175dbe",
+        "row_alt": "#f2f6ff",
+        "hover": "#e7ecff",
+        "pressed": "#d3d9f1",
+        "selected": "#d3dfff",
+        "selected_foreground": "#0d1633",
+        "disabled_foreground": "#8692ac",
+    },
+    "dark": {
+        "brand_1": "#67c3ee",
+        "brand_2": "#5089ff",
+        "brand_3": "#c261bf",
+        "background": "#010121",
+        "foreground": "#eff3ff",
+        "muted": "#161b2c",
+        "muted_foreground": "#8a99c9",
+        "card": "#050a21",
+        "popover": "#080d20",
+        "popover_foreground": "#eff3ff",
+        "surface": "#0c0b29",
+        "surface_strong": "#131330",
+        "primary": "#6ea8ff",
+        "primary_foreground": "#010121",
+        "secondary": "#161b2c",
+        "secondary_foreground": "#eff3ff",
+        "accent": "#161b2c",
+        "accent_foreground": "#eff3ff",
+        "destructive": "#ff2b1f",
+        "destructive_foreground": "#ffffff",
+        "success": "#80d27a",
+        "success_foreground": "#010121",
+        "warning": "#ffaa27",
+        "warning_foreground": "#010121",
+        "border": "#3b4660",
+        "border_strong": "#50628d",
+        "input": "#3b4660",
+        "ring": "#6ea8ff",
+        "row_alt": "#0b1020",
+        "hover": "#1c253e",
+        "pressed": "#2b354f",
+        "selected": "#233463",
+        "selected_foreground": "#eff3ff",
+        "disabled_foreground": "#5d6883",
+    },
+}
+
+# Transparent tokens: (hex of the color itself, alpha). PALETTES holds the blended result.
+ALPHA = {
+    "light": {"surface": ("#344570", 0.04), "surface_strong": ("#344570", 0.08)},
+    "dark": {"surface": ("#ffffff", 0.04), "surface_strong": ("#ffffff", 0.07)},
+}
+
+# Source colors (for wide-gamut renderers).
+OKLCH = {
+    "light": {
+        "brand_1": "oklch(44.54% 0.1111 194.77)",
+        "brand_2": "oklch(52.87% 0.2944 264.05)",
+        "brand_3": "oklch(50.2% 0.1818 328.36)",
+        "background": "oklch(97.58% 0.0215 274.11)",
+        "foreground": "oklch(21.06% 0.0576 267.34)",
+        "muted": "oklch(88.82% 0.0336 274.11)",
+        "muted_foreground": "oklch(44.78% 0.0745 267.28)",
+        "card": "oklch(100% 0 0)",
+        "popover": "oklch(100% 0 0)",
+        "popover_foreground": "oklch(21.06% 0.0576 267.34)",
+        "surface": "oklch(39.64% 0.0761 267.28)",
+        "surface_strong": "oklch(39.64% 0.0761 267.28)",
+        "primary": "oklch(49.59% 0.167 258.28)",
+        "primary_foreground": "oklch(100% 0 0)",
+        "secondary": "oklch(88.82% 0.0336 274.11)",
+        "secondary_foreground": "oklch(21.06% 0.0576 267.34)",
+        "accent": "oklch(88.82% 0.0336 274.11)",
+        "accent_foreground": "oklch(21.06% 0.0576 267.34)",
+        "destructive": "oklch(55.26% 0.2634 29.23)",
+        "destructive_foreground": "oklch(100% 0 0)",
+        "success": "oklch(48.86% 0.1813 142.5)",
+        "success_foreground": "oklch(100% 0 0)",
+        "warning": "oklch(53.9% 0.1939 70.67)",
+        "warning_foreground": "oklch(100% 0 0)",
+        "border": "oklch(77.49% 0.0486 274.11)",
+        "border_strong": "oklch(64.2% 0.0794 270.89)",
+        "input": "oklch(77.49% 0.0486 274.11)",
+        "ring": "oklch(49.59% 0.167 258.28)",
+        "row_alt": "oklch(97.58% 0.0215 274.11)",
+        "hover": "oklch(94.49% 0.0262 274.11)",
+        "pressed": "oklch(88.82% 0.0336 274.11)",
+        "selected": "oklch(90.45% 0.0483 270.89)",
+        "selected_foreground": "oklch(21.06% 0.0576 267.34)",
+        "disabled_foreground": "oklch(65.86% 0.0415 267.34)",
+    },
+    "dark": {
+        "brand_1": "oklch(77.79% 0.1073 230.32)",
+        "brand_2": "oklch(66.02% 0.2756 264.05)",
+        "brand_3": "oklch(64.1% 0.1702 328.36)",
+        "background": "oklch(12.06% 0.0707 269.56)",
+        "foreground": "oklch(96.59% 0.023 274.11)",
+        "muted": "oklch(22.67% 0.0327 269.56)",
+        "muted_foreground": "oklch(68.9% 0.0726 270.89)",
+        "card": "oklch(15.61% 0.0487 269.56)",
+        "popover": "oklch(16.67% 0.0414 269.56)",
+        "popover_foreground": "oklch(96.59% 0.023 274.11)",
+        "surface": "oklch(100% 0 0)",
+        "surface_strong": "oklch(100% 0 0)",
+        "primary": "oklch(72.92% 0.1411 258.28)",
+        "primary_foreground": "oklch(12.06% 0.0707 269.56)",
+        "secondary": "oklch(22.67% 0.0327 269.56)",
+        "secondary_foreground": "oklch(96.59% 0.023 274.11)",
+        "accent": "oklch(22.67% 0.0327 269.56)",
+        "accent_foreground": "oklch(96.59% 0.023 274.11)",
+        "destructive": "oklch(65.03% 0.2474 29.23)",
+        "destructive_foreground": "oklch(100% 0 0)",
+        "success": "oklch(78.87% 0.145 142.5)",
+        "success_foreground": "oklch(12.06% 0.0707 269.56)",
+        "warning": "oklch(80.51% 0.1642 70.67)",
+        "warning_foreground": "oklch(12.06% 0.0707 269.56)",
+        "border": "oklch(39.47% 0.0465 267.34)",
+        "border_strong": "oklch(49.92% 0.0729 267.28)",
+        "input": "oklch(39.47% 0.0465 267.34)",
+        "ring": "oklch(72.92% 0.1411 258.28)",
+        "row_alt": "oklch(17.73% 0.0341 269.56)",
+        "hover": "oklch(27.06% 0.0486 267.34)",
+        "pressed": "oklch(33.27% 0.0475 267.34)",
+        "selected": "oklch(33.64% 0.0857 267.28)",
+        "selected_foreground": "oklch(96.59% 0.023 274.11)",
+        "disabled_foreground": "oklch(51.89% 0.0445 267.34)",
+    },
+}
+
+# Sizes in px (rem base 16 px); pt = px * 0.75.
+SIZES = {"radius": 8, "focus_width": 2}
+TEXT = {"xs": 12, "sm": 13, "base": 15, "lg": 18, "xl": 24}
+TEXT_PT = {"xs": 9, "sm": 9.75, "base": 11.25, "lg": 13.5, "xl": 18}
+
+FONTS = {
+    "sans": {"windows": "Segoe UI", "macos": ".AppleSystemUIFont", "linux": "Cantarell"},
+    "mono": {"windows": "Consolas", "macos": "Menlo", "linux": "DejaVu Sans Mono"},
+}
+
+# Shadows: x, y, blur, spread in px; color hex + alpha per mode.
+SHADOWS = {
+    "sm": {"x": 0, "y": 1, "blur": 2, "spread": 0, "light": ("#344570", 0.08), "dark": ("#010101", 0.4)},
+    "md": {"x": 0, "y": 4, "blur": 12, "spread": -2, "light": ("#344570", 0.12), "dark": ("#010101", 0.5)},
+    "lg": {"x": 0, "y": 12, "blur": 32, "spread": -6, "light": ("#344570", 0.16), "dark": ("#010101", 0.6)},
+}
+
+
+def font(name="sans", platform=None):
+    """Font family for this platform (sys.platform: win32 / darwin / linux)."""
+    import sys
+    key = {"win32": "windows", "darwin": "macos"}.get(platform or sys.platform, "linux")
+    return FONTS[name][key]

package/package.json

@@ -1,6 +1,63 @@
-{
-  "name": "@birdycom/omniacss",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+{
+  "name": "@birdycom/omniacss",
+  "version": "0.11.1",
+  "description": "OmniaCSS utilities: modern CSS (anchor positioning, container queries, view transitions, light-dark()) as utility classes, generated on demand.",
+  "type": "module",
+  "license": "MIT",
+  "author": "Serge Cools (Birdycom)",
+  "homepage": "https://omniacss.eu",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Birdycom/OmniaCSS.git",
+    "directory": "packages/core"
+  },
+  "bugs": {
+    "url": "https://github.com/Birdycom/OmniaCSS/issues"
+  },
+  "keywords": [
+    "css",
+    "utility-first",
+    "design-system",
+    "light-dark",
+    "container-queries",
+    "anchor-positioning",
+    "omniacss"
+  ],
+  "engines": {
+    "node": ">=22"
+  },
+  "exports": {
+    ".": "./dist/omnia.css",
+    "./min": "./dist/omnia.min.css",
+    "./starter": "./dist/omnia.starter.min.css",
+    "./tokens": "./dist/oc-colors.css",
+    "./theme": "./dist/oc-theme.css",
+    "./tokens/semantic.json": "./tokens/semantic.json",
+    "./tokens/export": "./src/tokens.mjs",
+    "./engine": "./src/engine.mjs",
+    "./postcss": "./src/postcss.mjs",
+    "./scss/*": "./scss/*",
+    "./dist/*": "./dist/*",
+    "./package.json": "./package.json"
+  },
+  "style": "./dist/omnia.css",
+  "files": [
+    "dist",
+    "scss",
+    "src",
+    "tokens",
+    "README.md",
+    "LICENSE"
+  ],
+  "dependencies": {
+    "postcss": "^8.5.3"
+  },
+  "unpkg": "./dist/omnia.starter.min.css",
+  "jsdelivr": "./dist/omnia.starter.min.css",
+  "sideEffects": [
+    "*.css"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/scss/base/_reset.scss

@@ -0,0 +1,88 @@
+/* CSS Document 
+* file: css/omnia_reset.css
+* Reset the default browser settings
+* Copyright 2021-2022 birdycom.be
+* Autor: Serge Cools
+*/
+
+/* info: https://piccalil.li/blog/a-modern-css-reset/ */
+
+
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Remove default margin */
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+figure,
+picture,
+blockquote,
+dl,
+dd {
+  margin: 0;
+}
+
+/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+ul[role='list'],
+ol[role='list'] {
+  list-style: none;
+}
+
+/* Set core root defaults */
+html:focus-within {
+  scroll-behavior: smooth;
+}
+
+/* Set core body defaults */
+body {
+  min-height: 100vh;
+  text-rendering: optimizeSpeed;
+  line-height: 1.5;
+}
+
+/* A elements that don't have a class get default styles */
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+}
+
+/* Make images easier to work with */
+img,
+picture {
+  max-width: 100%;
+ /* display: block;*/
+}
+
+/* Inherit fonts for inputs and buttons
+   Make form elements easier to work with */
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
+@media (prefers-reduced-motion: reduce) {
+  html:focus-within {
+   scroll-behavior: auto;
+  }
+  
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}

package/scss/config/omniacss.config.scss

@@ -0,0 +1,114 @@
+// SCSS Document 
+// File: src/scss/config/omniacss.config.scss
+// Description: Loading file for all configuration settings in this Framework
+// Copyright: 2021-2023 Birdycom
+// Autor: Serge Cools
+// Version: 0.2.0
+// Framework: OmniaCSS
+
+// master settings to use for the creation of the CSS file
+
+// Color: type of value
+// Properties for value: rgb, hsl, oklch, oklab, Hex, Websafe
+// Properties for name: name_nl, name_en
+
+/// Color methods (`hex`, `hsl`, `rgb`, `oklch`, `oklab`).
+/// @group colorsettings
+/// @name defaultcolortypevalue
+/// @type string
+$DEFAULT-COLOR-TYPE-VALUE: oklch !default;
+
+/// @group colorsettings
+/// @name colorset
+/// @type string
+$COLORSET: true;
+
+
+
+/// Default base font unit (`px`, `em`, `rem`).
+/// @group fontsettings
+/// @name defaultbasefontunit
+/// @type string
+$DEFAULT-BASE-FONT-UNIT: "em" !default;
+
+/// Default font size ( The default font size for html is 16px )
+/// @group fontsettings
+/// @name defaultbasefontsize
+/// @type number
+$DEFAULT-BASE-FONT-SIZE: 16 !default;
+
+
+/// Defaut base unit (`px`, `em`, `rem`).
+/// @group basesettings
+/// @name defaultbaseunit
+/// @type string
+$DEFAULT-BASE-UNIT: "rem" !default;
+
+// SETTINGS FOR the two groups of padding, margin, width and height
+
+/// Default base min pixels 
+/// This setting is for the min of pixels we will use, the pixels wil convert to rem or em
+/// The min lengths we will use to create our padding, margin, width, height
+/// @group basesettings
+/// @name defaultbasefirstmingroup
+/// @type number
+$DEFAULT-BASE-FIRST-MIN-GROUP: 0 !default;
+
+/// Default base first max pixels 
+/// This setting is for the first group max of pixels we will use, the pixels wil convert to rem or em
+/// The max lengths we will use to create our padding, margin, width, height
+/// @group basesettings
+/// @name defaultbasefirstmaxgroup
+/// @type number
+$DEFAULT-BASE-FIRST-MAX-GROUP: 16 !default;
+
+/// Default base first group step size .
+/// This is the first step size we will use to create the padding, margin, width, height
+/// For the first group the pixels wil g from 2px to 4px and then 6px until the max of the first group. 
+/// @group basesettings
+/// @name defaultbasefirststep
+/// @type number
+$DEFAULT-BASE-FIRST-STEP: 2 !default;
+
+/// Default base min pixels 
+/// This setting is for the min of pixels we will use, the pixels wil convert to rem or em
+/// The min lengths we will use to create our padding, margin, width, height
+/// This setting is the som of DEFAULT-BASE-FIRST-MAX-GROUP and DEFAULT-BASE-FIRST-STEP
+/// @group basesettings
+/// @name defaultbasesecondmingroup
+/// @type number
+$DEFAULT-BASE-SECOND-MIN-GROUP: 20 !default;
+
+/// Default base max pixels 
+/// This setting is for the max of pixels we will use, the pixels wil convert to rem or em
+/// The max lengths we will use to create our padding, margin, width, height
+/// @group basesettings
+/// @name defaultbasesecondmaxgroup
+/// @type number
+$DEFAULT-BASE-SECOND-MAX-GROUP: 400 !default;
+
+/// Default base first group step size .
+/// This is the first step size we will use to create the padding, margin, width, height
+/// For the first group the pixels wil g from 2px to 4px and then 6px until the max of the first group. 
+/// @group basesettings
+/// @name defaultbasesecondstep
+/// @type number
+$DEFAULT-BASE-SECOND-STEP: 4 !default;
+
+/// Spacing (padding, margin) max in px — 10rem at 16px base. Other sizing (width, height, gap) still use DEFAULT-BASE-SECOND-MAX-GROUP.
+/// @group basesettings
+$SPACING-SECOND-MAX-GROUP: 160 !default;
+
+
+/// basesize in px
+/// @group basesettings
+/// @name defaultbasesizepercent
+/// @type string
+$DEFAULT-BASE-SIZE-PERCENT: 100% !default;
+
+
+/// string variable
+/// @group variables
+/// @name run
+/// @type string
+$run: null !default;

package/scss/config/omniacss.fonts.scss

@@ -0,0 +1,34 @@
+// SCSS Document 
+// File: src/scss/config/omniacss.fonts.scss
+// Description: Loading file for all the fonts in this Framework
+// Copyright: 2021-2022 Birdycom
+// Autor: Serge Cools
+// Version: 0.2.0
+// Framework: OmniaCSS
+
+@import url('https://fonts.googleapis.com/css2?family=Cedarville+Cursive&family=Cormorant+Infant:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Noto+Emoji:wght@300;400;500;600;700&family=Noto+Sans+JP:wght@100;300;400;500;700;900&family=Noto+Sans+Math&family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&family=Roboto+Flex:opsz,wght@8..144,100;8..144,200;8..144,300;8..144,400;8..144,500;8..144,600;8..144,700;8..144,800;8..144,900;8..144,1000&family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap');
+
+/* Local font files served from public/fonts/ */
+@font-face {
+    font-family: 'Noto Color Emoji';
+    src: url('/fonts/noto/NotoColorEmoji.ttf') format('truetype');
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Lucida Console';
+    src: url('/fonts/lucida_console/LucidaConsoleRegular.ttf') format('truetype');
+    font-display: swap;
+}
+
+/* Fixed: name must match CSS class "Noto Sans Egyptian Hieroglyphs" */
+/* Fixed: format must be "truetype" not "ttf" */
+/* Fixed: path must start from /fonts/ not /public/fonts/ */
+@font-face {
+    font-family: 'Noto Sans Egyptian Hieroglyphs';
+    font-style: normal;
+    font-weight: 400;
+    font-display: block;
+    src: url('/fonts/noto/NotoSansEgyptianHieroglyphs-Regular.ttf') format('truetype');
+    unicode-range: U+13000-1342E, U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}