@zuii/core 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 macvincent
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@zuii/core",
+  "version": "1.0.0",
+  "description": "Styles de base et utilitaires pour zuii",
+  "main": "./src/styles/main.scss",
+  "exports": {
+    "./styles/*": "./src/styles/*",
+    "./utils/*": "./src/utils/*"
+  },
+  "keywords": [],
+  "author": "Vincent Moreau",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/styles/_base.scss

@@ -0,0 +1,8 @@
+@layer vendor, layout, components, utilities;
+
+@import "../../../../src/components/Link/style/index.scss";
+
+
+p {
+	margin: 0;
+}

package/src/styles/_tokens.scss

@@ -0,0 +1,141 @@
+/**
+ * Auto-generated
+ */
+
+$border: (
+  "color": (var(--primary)),
+  "width": (1px),
+  "style": (solid),
+  "radius": (var(--radius-pill)),
+  "radius-sm": (var(--radius-base)),
+  "radius-md": (var(--radius-md)),
+  "radius-lg": (var(--radius-lg)),
+  "radius-xl": (var(--radius-xl)),
+  "radius-xxl": (var(--radius-xxl)),
+  "radius-2xl": (var(--radius-2xl)),
+  "radius-pill": (var(--radius-pill)),
+);
+
+$brands: (
+  "primary": (#296782),
+  "secondary": (#49B4E8),
+  "accent": (#49B4E8),
+  "tertiary": (#f5524d),
+  "success": (#73D3B6),
+  "danger": (#EA5F5F),
+  "warning": (#F5D762),
+  "info": (#73B6D3),
+  "light": (#FFFFFF),
+  "dark": (#000000),
+);
+
+$color: (
+  "white": (#ffffff),
+  "black": (#000000),
+  "gray": (
+    "100": (#f8f9fa),
+    "200": (#e9ecef),
+    "300": (#dee2e6),
+    "400": (#ced4da),
+    "500": (#adb5bd),
+    "600": (#6c757d),
+    "700": (#495057),
+    "800": (#343a40),
+    "900": (#212529),
+  ),
+  "gray-alias": (#6c757d),
+  "gray-dark-alias": (#343a40),
+  "body-color": (var(--primary)),
+  "body-bg-percentage": (95%),
+  "body-bg": (color-mix(in srgb, var(--primary), var(--white) var(--body-bg-percentage))),
+  "gradient": (linear-gradient(33.65deg, color-mix(in srgb, var(--primary-light), var(--white) 60%) 0%, color-mix(in srgb, var(--primary-light), var(--white) 90%) 100%)),
+  "link-color-rgb": (var(--accent-rgb)),
+  "link-hover-color-rgb": (var(--accent-dark-rgb)),
+);
+
+$font: (
+  "primary": (Mulish, sans-serif),
+  "monospace": (var(--font-primary)),
+  "sans-serif": (var(--font-primary)),
+);
+
+$icons: (
+  "chevron-down": (url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down-icon lucide-chevron-down"><path d="m6 9 6 6 6-6"/></svg>')),
+);
+
+$radius: (
+  "none": (0),
+  "base": (var(--size-xs)),
+  "sm": (var(--size-sm)),
+  "md": (var(--size-md)),
+  "lg": (var(--size-lg)),
+  "xl": (var(--size-xl)),
+  "2xl": (var(--size-2xl)),
+  "pill": (999rem),
+);
+
+$box-shadow: (
+  "color": (var(--primary)),
+  "xs": (0 1px 2px 0 color-mix(in srgb, var(--box-shadow-color), transparent 80%)),
+  "sm": (0 1px 3px 0 color-mix(in srgb, var(--box-shadow-color), transparent 80%)),
+  "md": (0 4px 6px -1px color-mix(in srgb, var(--box-shadow-color), transparent 80%)),
+  "lg": (0 10px 15px -3px color-mix(in srgb, var(--box-shadow-color), transparent 80%)),
+  "xl": (0 20px 25px -5px color-mix(in srgb, var(--box-shadow-color), transparent 80%)),
+  "2xl": (0 25px 50px -12px color-mix(in srgb, var(--box-shadow-color), transparent 80%)),
+  "outline": (0 0 2px 4px color-mix(in srgb, var(--box-shadow-color), transparent 80%)),
+  "inset": (inset 0 0 6px 0 color-mix(in srgb, var(--box-shadow-color), transparent 80%)),
+  "none": (0 0 0 0 color-mix(in srgb, var(--box-shadow-color), transparent 80%)),
+);
+
+$size: (
+  "0": (0),
+  "1": (0.25rem),
+  "2": (0.5rem),
+  "3": (0.75rem),
+  "4": (1rem),
+  "5": (1.25rem),
+  "6": (1.5rem),
+  "7": (1.75rem),
+  "8": (2rem),
+  "9": (2.25rem),
+  "10": (2.5rem),
+  "12": (3rem),
+  "14": (3.5rem),
+  "16": (4rem),
+  "20": (5rem),
+  "24": (6rem),
+  "28": (7rem),
+  "32": (8rem),
+  "36": (9rem),
+  "40": (10rem),
+  "44": (11rem),
+  "48": (12rem),
+  "52": (13rem),
+  "56": (14rem),
+  "60": (15rem),
+  "64": (16rem),
+  "72": (18rem),
+  "80": (20rem),
+  "96": (24rem),
+  "none": (var(--size-0)),
+  "xs": (var(--size-1)),
+  "sm": (var(--size-2)),
+  "md": (var(--size-4)),
+  "lg": (var(--size-8)),
+  "xl": (var(--size-16)),
+  "2xl": (var(--size-32)),
+  "3xl": (var(--size-64)),
+  "4xl": (var(--size-80)),
+);
+
+$spacing: (
+  "none": (var(--size-0)),
+  "xs": (var(--size-1)),
+  "sm": (var(--size-2)),
+  "md": (var(--size-4)),
+  "lg": (var(--size-8)),
+  "xl": (var(--size-16)),
+  "2xl": (var(--size-32)),
+  "3xl": (var(--size-64)),
+  "4xl": (var(--size-80)),
+);

package/src/styles/main.scss

@@ -0,0 +1,2 @@
+@use "@core/base.scss";
+@import "@core/tokens.css" layer(components);

package/src/styles/tokens.css

@@ -0,0 +1,270 @@
+/**
+ * Auto-generated
+ */
+
+:root {
+  --border-color: var(--primary);
+  --border-width: 1px;
+  --border-style: solid;
+  --border-radius: var(--radius-pill);
+  --border-radius-sm: var(--radius-base);
+  --border-radius-md: var(--radius-md);
+  --border-radius-lg: var(--radius-lg);
+  --border-radius-xl: var(--radius-xl);
+  --border-radius-xxl: var(--radius-xxl);
+  --border-radius-2xl: var(--radius-2xl);
+  --border-radius-pill: var(--radius-pill);
+  --primary: #296782;
+  --primary-rgb: 41, 103, 130;
+  --primary-dark: #1D4A5D;
+  --primary-dark-rgb: 29, 74, 93;
+  --primary-light: #73B6D3;
+  --primary-light-rgb: 115, 182, 211;
+  --primary-text-emphasis: var(--primary-dark);
+  --primary-bg-subtle: var(--primary-light);
+  --primary-border-subtle: #abbfcb;
+  --primary-border-subtle-rgb: 171, 191, 203;
+  --primary-contrast: #f4f7f8;
+  --primary-contrast-rgb: 244, 247, 248;
+  --primary-dark-contrast: #f3f5f6;
+  --primary-light-contrast: #171e21;
+  --primary-border-subtle-contrast: #1d1f20;
+  --secondary: #49B4E8;
+  --secondary-rgb: 73, 180, 232;
+  --secondary-dark: #116188;
+  --secondary-dark-rgb: 17, 97, 136;
+  --secondary-light: #D2ECF9;
+  --secondary-light-rgb: 210, 236, 249;
+  --secondary-text-emphasis: var(--secondary-dark);
+  --secondary-bg-subtle: var(--secondary-light);
+  --secondary-border-subtle: #79c3ed;
+  --secondary-border-subtle-rgb: 121, 195, 237;
+  --secondary-contrast: #141e23;
+  --secondary-contrast-rgb: 20, 30, 35;
+  --secondary-dark-contrast: #f4f7f9;
+  --secondary-light-contrast: #212425;
+  --secondary-border-subtle-contrast: #181f24;
+  --accent: #49B4E8;
+  --accent-rgb: 73, 180, 232;
+  --accent-dark: #116188;
+  --accent-dark-rgb: 17, 97, 136;
+  --accent-light: #D2ECF9;
+  --accent-light-rgb: 210, 236, 249;
+  --accent-text-emphasis: var(--accent-dark);
+  --accent-bg-subtle: var(--accent-light);
+  --accent-border-subtle: #79c3ed;
+  --accent-border-subtle-rgb: 121, 195, 237;
+  --accent-contrast: #141e23;
+  --accent-contrast-rgb: 20, 30, 35;
+  --accent-dark-contrast: #f4f7f9;
+  --accent-light-contrast: #212425;
+  --accent-border-subtle-contrast: #181f24;
+  --tertiary: #f5524d;
+  --tertiary-rgb: 245, 82, 77;
+  --tertiary-dark: #461f1b;
+  --tertiary-dark-rgb: 70, 31, 27;
+  --tertiary-light: #ffdfd9;
+  --tertiary-light-rgb: 255, 223, 217;
+  --tertiary-text-emphasis: var(--tertiary-dark);
+  --tertiary-bg-subtle: var(--tertiary-light);
+  --tertiary-border-subtle: #ffbeb4;
+  --tertiary-border-subtle-rgb: 255, 190, 180;
+  --tertiary-contrast: #fff7f5;
+  --tertiary-contrast-rgb: 255, 247, 245;
+  --tertiary-dark-contrast: #f5f2f2;
+  --tertiary-light-contrast: #262222;
+  --tertiary-border-subtle-contrast: #261f1d;
+  --success: #73D3B6;
+  --success-rgb: 115, 211, 182;
+  --success-dark: #5ca58f;
+  --success-dark-rgb: 92, 165, 143;
+  --success-light: #bceada;
+  --success-light-rgb: 188, 234, 218;
+  --success-text-emphasis: var(--success-dark);
+  --success-bg-subtle: var(--success-light);
+  --success-border-subtle: #caeee1;
+  --success-border-subtle-rgb: 202, 238, 225;
+  --success-contrast: #17211e;
+  --success-contrast-rgb: 23, 33, 30;
+  --success-dark-contrast: #f7faf9;
+  --success-light-contrast: #1f2322;
+  --success-border-subtle-contrast: #202422;
+  --danger: #EA5F5F;
+  --danger-rgb: 234, 95, 95;
+  --danger-dark: #AF1818;
+  --danger-dark-rgb: 175, 24, 24;
+  --danger-light: #F8D0A6;
+  --danger-light-rgb: 248, 208, 166;
+  --danger-text-emphasis: var(--danger-dark);
+  --danger-bg-subtle: var(--danger-light);
+  --danger-border-subtle: #fec1bc;
+  --danger-border-subtle-rgb: 254, 193, 188;
+  --danger-contrast: #fff7f6;
+  --danger-contrast-rgb: 255, 247, 246;
+  --danger-dark-contrast: #fdf4f2;
+  --danger-light-contrast: #25211c;
+  --danger-border-subtle-contrast: #261f1e;
+  --warning: #F5D762;
+  --warning-rgb: 245, 215, 98;
+  --warning-dark: #bfa84f;
+  --warning-dark-rgb: 191, 168, 79;
+  --warning-light: #fdebb2;
+  --warning-light-rgb: 253, 235, 178;
+  --warning-text-emphasis: var(--warning-dark);
+  --warning-bg-subtle: var(--warning-light);
+  --warning-border-subtle: #feefc1;
+  --warning-border-subtle-rgb: 254, 239, 193;
+  --warning-contrast: #252115;
+  --warning-contrast-rgb: 37, 33, 21;
+  --warning-dark-contrast: #1f1c12;
+  --warning-light-contrast: #26231d;
+  --warning-border-subtle-contrast: #26241f;
+  --info: #73B6D3;
+  --info-rgb: 115, 182, 211;
+  --info-dark: #5c8fa5;
+  --info-dark-rgb: 92, 143, 165;
+  --info-light: #bbdae9;
+  --info-light-rgb: 187, 218, 233;
+  --info-text-emphasis: var(--info-dark);
+  --info-bg-subtle: var(--info-light);
+  --info-border-subtle: #c9e1ed;
+  --info-border-subtle-rgb: 201, 225, 237;
+  --info-contrast: #171e21;
+  --info-contrast-rgb: 23, 30, 33;
+  --info-dark-contrast: #f7f9fa;
+  --info-light-contrast: #1e2223;
+  --info-border-subtle-contrast: #202224;
+  --light: #FFFFFF;
+  --light-rgb: 255, 255, 255;
+  --light-dark: #474747;
+  --light-dark-rgb: 71, 71, 71;
+  --light-light: #ffffff;
+  --light-light-rgb: 255, 255, 255;
+  --light-text-emphasis: var(--light-dark);
+  --light-bg-subtle: var(--light-light);
+  --light-border-subtle: #ffffff;
+  --light-border-subtle-rgb: 255, 255, 255;
+  --light-contrast: #262626;
+  --light-contrast-rgb: 38, 38, 38;
+  --light-dark-contrast: #f5f5f5;
+  --light-light-contrast: #262626;
+  --light-border-subtle-contrast: #262626;
+  --dark: #000000;
+  --dark-rgb: 0, 0, 0;
+  --dark-dark: #000000;
+  --dark-dark-rgb: 0, 0, 0;
+  --dark-light: #c6c6c6;
+  --dark-light-rgb: 198, 198, 198;
+  --dark-text-emphasis: var(--dark-dark);
+  --dark-bg-subtle: var(--dark-light);
+  --dark-border-subtle: #919191;
+  --dark-border-subtle-rgb: 145, 145, 145;
+  --dark-contrast: #f1f1f1;
+  --dark-contrast-rgb: 241, 241, 241;
+  --dark-dark-contrast: #f1f1f1;
+  --dark-light-contrast: #1f1f1f;
+  --dark-border-subtle-contrast: #f9f9f9;
+  --white: #ffffff;
+  --white-rgb: 255, 255, 255;
+  --white-contrast: #000000;
+  --black: #000000;
+  --black-rgb: 0, 0, 0;
+  --black-contrast: #ffffff;
+  --gray-100: #f8f9fa;
+  --gray-100-contrast: #000000;
+  --gray-200: #e9ecef;
+  --gray-200-contrast: #000000;
+  --gray-300: #dee2e6;
+  --gray-300-contrast: #000000;
+  --gray-400: #ced4da;
+  --gray-400-contrast: #000000;
+  --gray-500: #adb5bd;
+  --gray-500-contrast: #000000;
+  --gray-600: #6c757d;
+  --gray-600-contrast: #ffffff;
+  --gray-700: #495057;
+  --gray-700-contrast: #ffffff;
+  --gray-800: #343a40;
+  --gray-800-contrast: #ffffff;
+  --gray-900: #212529;
+  --gray-900-contrast: #ffffff;
+  --gray: #6c757d;
+  --gray-contrast: #ffffff;
+  --gray-dark: #343a40;
+  --gray-dark-contrast: #ffffff;
+  --body-color: var(--primary);
+  --body-bg-percentage: 95%;
+  --body-bg: color-mix(in srgb, var(--primary), var(--white) var(--body-bg-percentage));
+  --gradient: linear-gradient(33.65deg, color-mix(in srgb, var(--primary-light), var(--white) 60%) 0%, color-mix(in srgb, var(--primary-light), var(--white) 90%) 100%);
+  --link-color-rgb: var(--accent-rgb);
+  --link-hover-color-rgb: var(--accent-dark-rgb);
+  --font-primary: Mulish, sans-serif;
+  --font-monospace: var(--font-primary);
+  --font-sans-serif: var(--font-primary);
+  --icons-chevron-down: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down-icon lucide-chevron-down"><path d="m6 9 6 6 6-6"/></svg>');
+  --radius-none: 0;
+  --radius-base: var(--size-xs);
+  --radius-sm: var(--size-sm);
+  --radius-md: var(--size-md);
+  --radius-lg: var(--size-lg);
+  --radius-xl: var(--size-xl);
+  --radius-2xl: var(--size-2xl);
+  --radius-pill: 999rem;
+  --box-shadow-color: var(--primary);
+  --box-shadow-xs: 0 1px 2px 0 color-mix(in srgb, var(--box-shadow-color), transparent 80%);
+  --box-shadow-sm: 0 1px 3px 0 color-mix(in srgb, var(--box-shadow-color), transparent 80%);
+  --box-shadow-md: 0 4px 6px -1px color-mix(in srgb, var(--box-shadow-color), transparent 80%);
+  --box-shadow-lg: 0 10px 15px -3px color-mix(in srgb, var(--box-shadow-color), transparent 80%);
+  --box-shadow-xl: 0 20px 25px -5px color-mix(in srgb, var(--box-shadow-color), transparent 80%);
+  --box-shadow-2xl: 0 25px 50px -12px color-mix(in srgb, var(--box-shadow-color), transparent 80%);
+  --box-shadow-outline: 0 0 2px 4px color-mix(in srgb, var(--box-shadow-color), transparent 80%);
+  --box-shadow-inset: inset 0 0 6px 0 color-mix(in srgb, var(--box-shadow-color), transparent 80%);
+  --box-shadow-none: 0 0 0 0 color-mix(in srgb, var(--box-shadow-color), transparent 80%);
+  --size-0: 0;
+  --size-1: 0.25rem;
+  --size-2: 0.5rem;
+  --size-3: 0.75rem;
+  --size-4: 1rem;
+  --size-5: 1.25rem;
+  --size-6: 1.5rem;
+  --size-7: 1.75rem;
+  --size-8: 2rem;
+  --size-9: 2.25rem;
+  --size-10: 2.5rem;
+  --size-12: 3rem;
+  --size-14: 3.5rem;
+  --size-16: 4rem;
+  --size-20: 5rem;
+  --size-24: 6rem;
+  --size-28: 7rem;
+  --size-32: 8rem;
+  --size-36: 9rem;
+  --size-40: 10rem;
+  --size-44: 11rem;
+  --size-48: 12rem;
+  --size-52: 13rem;
+  --size-56: 14rem;
+  --size-60: 15rem;
+  --size-64: 16rem;
+  --size-72: 18rem;
+  --size-80: 20rem;
+  --size-96: 24rem;
+  --size-none: var(--size-0);
+  --size-xs: var(--size-1);
+  --size-sm: var(--size-2);
+  --size-md: var(--size-4);
+  --size-lg: var(--size-8);
+  --size-xl: var(--size-16);
+  --size-2xl: var(--size-32);
+  --size-3xl: var(--size-64);
+  --size-4xl: var(--size-80);
+  --spacing-none: var(--size-0);
+  --spacing-xs: var(--size-1);
+  --spacing-sm: var(--size-2);
+  --spacing-md: var(--size-4);
+  --spacing-lg: var(--size-8);
+  --spacing-xl: var(--size-16);
+  --spacing-2xl: var(--size-32);
+  --spacing-3xl: var(--size-64);
+  --spacing-4xl: var(--size-80);
+}