@thl-ui/styles 0.0.0-stage → 0.1.1

package/dist/tokens.css

@@ -0,0 +1,376 @@
+/* @thl-ui/tokens — generated, do not edit */
+
+:root {
+  --thl-color-primary: #0277b9;
+  --thl-color-success: #2ecc71;
+  --thl-color-info: #00bbd9;
+  --thl-color-warning: #ffb136;
+  --thl-color-danger: #d6411d;
+  --thl-color-default: #dbe8eb;
+  --thl-color-inverse: #282f32;
+  --thl-color-dark: #2b2b2b;
+  --thl-color-purple: #4a23ad;
+  --thl-color-red: #d93c17;
+  --thl-color-blue: #0078bc;
+  --thl-color-light: #e5ebec;
+  --thl-color-extralight: #f7fafc;
+  --thl-color-white: #ffffff;
+  --thl-color-muted: #8d9498;
+  --thl-on-default: #333b3f;
+  --thl-on-primary: #ffffff;
+  --thl-on-success: #1d2326;
+  --thl-on-info: #1d2326;
+  --thl-on-warning: #1d2326;
+  --thl-on-danger: #ffffff;
+  --thl-on-inverse: #ffffff;
+  --thl-on-dark: #ffffff;
+  --thl-on-purple: #ffffff;
+  --thl-on-red: #ffffff;
+  --thl-on-muted: #1d2326;
+  --thl-color-default-text: #4f5a5e;
+  --thl-color-primary-text: #026aa7;
+  --thl-color-success-text: #18713d;
+  --thl-color-info-text: #0a6f82;
+  --thl-color-warning-text: #8a5700;
+  --thl-color-danger-text: #b5361a;
+  --thl-color-inverse-text: #282f32;
+  --thl-color-dark-text: #2b2b2b;
+  --thl-color-purple-text: #4a23ad;
+  --thl-color-red-text: #b5361a;
+  --thl-color-muted-text: #6b7377;
+  --thl-body-bg: #f4f8f9;
+  --thl-surface: #ffffff;
+  --thl-surface-muted: #f7fafc;
+  --thl-border-color: #e5ebec;
+  --thl-text: #6b7377;
+  --thl-text-strong: #333b3f;
+  --thl-heading: #333b3f;
+  --thl-link: #026aa7;
+  --thl-theme: #0277b9;
+  --thl-on-theme: #ffffff;
+  --thl-theme-text: #026aa7;
+  --thl-topbar-1: #0078bc;
+  --thl-topbar-2: #00beda;
+  --thl-topbar-text: #ffffff;
+  --thl-topbar-border: rgba(255,255,255,0.2);
+  --thl-sidebar-bg: #ffffff;
+  --thl-sidebar-text: #6b7377;
+  --thl-sidebar-active: #333b3f;
+  --thl-sidebar-border: #e5ebec;
+  --thl-font-family: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', 'Noto Sans JP', 'Noto Sans SC', sans-serif;
+  --thl-font-size: 14px;
+  --thl-font-size-sm: 12px;
+  --thl-font-size-lg: 16px;
+  --thl-line-height: 1.6;
+  --thl-h1: 36px;
+  --thl-h2: 24px;
+  --thl-h3: 21px;
+  --thl-h4: 18px;
+  --thl-h5: 16px;
+  --thl-h6: 14px;
+  --thl-radius-sm: 2px;
+  --thl-radius: 4px;
+  --thl-radius-lg: 8px;
+  --thl-radius-pill: 60px;
+  --thl-radius-circle: 50%;
+  --thl-shadow-sm: 0 1px 2px rgba(0,0,0,0.1);
+  --thl-shadow: 0 2px 6px rgba(0,0,0,0.05);
+  --thl-shadow-lg: 0 10px 20px rgba(0,0,0,0.09);
+  --thl-shadow-modal: 0 5px 15px rgba(0,0,0,0.1);
+  --thl-space-1: 4px;
+  --thl-space-2: 8px;
+  --thl-space-3: 12px;
+  --thl-space-4: 16px;
+  --thl-space-5: 20px;
+  --thl-space-6: 25px;
+  --thl-space-7: 30px;
+  --thl-topbar-height: 60px;
+  --thl-sidebar-width: 265px;
+  --thl-sidebar-mini-width: 60px;
+  --thl-right-sidebar-width: 240px;
+  --thl-container-padding: 30px;
+  --thl-control-height-sm: 30px;
+  --thl-control-height: 38px;
+  --thl-control-height-lg: 46px;
+  --thl-transition: 0.2s ease-in;
+  --thl-z-dropdown: 1000;
+  --thl-z-sidebar: 1001;
+  --thl-z-overlay: 1040;
+  --thl-z-modal: 1050;
+  --thl-z-popover: 1060;
+  --thl-z-toast: 1080;
+  --thl-z-preloader: 99999;
+  color-scheme: light;
+}
+
+[data-thl-theme="default"] {
+  --thl-theme: #0277b9;
+  --thl-topbar-1: #0078bc;
+  --thl-topbar-2: #00beda;
+  --thl-on-theme: #ffffff;
+  --thl-theme-text: #026aa7;
+}
+
+[data-thl-theme="default-dark"] {
+  --thl-theme: #0277b9;
+  --thl-topbar-1: #0078bc;
+  --thl-topbar-2: #00beda;
+  --thl-on-theme: #ffffff;
+  --thl-theme-text: #026aa7;
+  --thl-sidebar-bg: #4f5467;
+  --thl-sidebar-text: #dcdfe5;
+  --thl-sidebar-active: #ffffff;
+  --thl-sidebar-border: #727685;
+}
+
+[data-thl-theme="green"] {
+  --thl-theme: #2ecc71;
+  --thl-topbar-1: #25bf67;
+  --thl-topbar-2: #3fdd82;
+  --thl-on-theme: #1d2326;
+  --thl-theme-text: #18713d;
+}
+
+[data-thl-theme="green-dark"] {
+  --thl-theme: #2ecc71;
+  --thl-topbar-1: #25bf67;
+  --thl-topbar-2: #3fdd82;
+  --thl-on-theme: #1d2326;
+  --thl-theme-text: #18713d;
+  --thl-sidebar-bg: #4f5467;
+  --thl-sidebar-text: #dcdfe5;
+  --thl-sidebar-active: #ffffff;
+  --thl-sidebar-border: #727685;
+}
+
+[data-thl-theme="yellow"] {
+  --thl-theme: #ffb136;
+  --thl-topbar-1: #f2a225;
+  --thl-topbar-2: #ffbb51;
+  --thl-on-theme: #1d2326;
+  --thl-theme-text: #8a5700;
+}
+
+[data-thl-theme="yellow-dark"] {
+  --thl-theme: #ffb136;
+  --thl-topbar-1: #f2a225;
+  --thl-topbar-2: #ffbb51;
+  --thl-on-theme: #1d2326;
+  --thl-theme-text: #8a5700;
+  --thl-sidebar-bg: #4f5467;
+  --thl-sidebar-text: #dcdfe5;
+  --thl-sidebar-active: #ffffff;
+  --thl-sidebar-border: #727685;
+}
+
+[data-thl-theme="red"] {
+  --thl-theme: #d6411d;
+  --thl-topbar-1: #d93c17;
+  --thl-topbar-2: #ff704f;
+  --thl-on-theme: #ffffff;
+  --thl-theme-text: #b5361a;
+}
+
+[data-thl-theme="red-dark"] {
+  --thl-theme: #d6411d;
+  --thl-topbar-1: #d93c17;
+  --thl-topbar-2: #ff704f;
+  --thl-on-theme: #ffffff;
+  --thl-theme-text: #b5361a;
+  --thl-sidebar-bg: #4f5467;
+  --thl-sidebar-text: #dcdfe5;
+  --thl-sidebar-active: #ffffff;
+  --thl-sidebar-border: #727685;
+}
+
+[data-thl-theme="purple"] {
+  --thl-theme: #4a23ad;
+  --thl-topbar-1: #4a23ad;
+  --thl-topbar-2: #693fd5;
+  --thl-on-theme: #ffffff;
+  --thl-theme-text: #4a23ad;
+}
+
+[data-thl-theme="purple-dark"] {
+  --thl-theme: #4a23ad;
+  --thl-topbar-1: #4a23ad;
+  --thl-topbar-2: #693fd5;
+  --thl-on-theme: #ffffff;
+  --thl-theme-text: #4a23ad;
+  --thl-sidebar-bg: #4f5467;
+  --thl-sidebar-text: #dcdfe5;
+  --thl-sidebar-active: #ffffff;
+  --thl-sidebar-border: #727685;
+}
+
+[data-thl-theme="black"] {
+  --thl-theme: #282f32;
+  --thl-topbar-1: #282f32;
+  --thl-topbar-2: #4b555b;
+  --thl-on-theme: #ffffff;
+  --thl-theme-text: #282f32;
+}
+
+[data-thl-theme="black-dark"] {
+  --thl-theme: #282f32;
+  --thl-topbar-1: #282f32;
+  --thl-topbar-2: #4b555b;
+  --thl-on-theme: #ffffff;
+  --thl-theme-text: #282f32;
+  --thl-sidebar-bg: #4f5467;
+  --thl-sidebar-text: #dcdfe5;
+  --thl-sidebar-active: #ffffff;
+  --thl-sidebar-border: #727685;
+}
+
+[data-thl-color-mode="dark"] {
+  --thl-body-bg: #14161c;
+  --thl-surface: #1d2027;
+  --thl-surface-muted: #252932;
+  --thl-border-color: #323743;
+  --thl-text: #a6adb4;
+  --thl-text-strong: #e8ebee;
+  --thl-heading: #f1f3f5;
+  --thl-link: #6cbbe8;
+  --thl-color-default: #3a404c;
+  --thl-on-default: #e8ebee;
+  --thl-color-default-text: #c3c9cd;
+  --thl-color-primary-text: #45a4da;
+  --thl-color-success-text: #2ecc71;
+  --thl-color-info-text: #00bbd9;
+  --thl-color-warning-text: #ffb136;
+  --thl-color-danger-text: #ff7a5c;
+  --thl-color-inverse-text: #c3c9cd;
+  --thl-color-dark-text: #c3c9cd;
+  --thl-color-purple-text: #a58cf0;
+  --thl-color-red-text: #ff7a5c;
+  --thl-color-muted-text: #a6adb4;
+  --thl-color-light: #2c313b;
+  --thl-color-extralight: #252932;
+  --thl-sidebar-bg: #1a1d23;
+  --thl-sidebar-text: #9aa1a9;
+  --thl-sidebar-active: #ffffff;
+  --thl-sidebar-border: #2a2e37;
+  --thl-shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
+  --thl-shadow: 0 2px 6px rgba(0,0,0,0.35);
+  --thl-shadow-lg: 0 10px 20px rgba(0,0,0,0.45);
+  --thl-shadow-modal: 0 5px 15px rgba(0,0,0,0.5);
+  color-scheme: dark;
+}
+
+@media (prefers-color-scheme: dark) {
+  [data-thl-color-mode="auto"] {
+    --thl-body-bg: #14161c;
+    --thl-surface: #1d2027;
+    --thl-surface-muted: #252932;
+    --thl-border-color: #323743;
+    --thl-text: #a6adb4;
+    --thl-text-strong: #e8ebee;
+    --thl-heading: #f1f3f5;
+    --thl-link: #6cbbe8;
+    --thl-color-default: #3a404c;
+    --thl-on-default: #e8ebee;
+    --thl-color-default-text: #c3c9cd;
+    --thl-color-primary-text: #45a4da;
+    --thl-color-success-text: #2ecc71;
+    --thl-color-info-text: #00bbd9;
+    --thl-color-warning-text: #ffb136;
+    --thl-color-danger-text: #ff7a5c;
+    --thl-color-inverse-text: #c3c9cd;
+    --thl-color-dark-text: #c3c9cd;
+    --thl-color-purple-text: #a58cf0;
+    --thl-color-red-text: #ff7a5c;
+    --thl-color-muted-text: #a6adb4;
+    --thl-color-light: #2c313b;
+    --thl-color-extralight: #252932;
+    --thl-sidebar-bg: #1a1d23;
+    --thl-sidebar-text: #9aa1a9;
+    --thl-sidebar-active: #ffffff;
+    --thl-sidebar-border: #2a2e37;
+    --thl-shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
+    --thl-shadow: 0 2px 6px rgba(0,0,0,0.35);
+    --thl-shadow-lg: 0 10px 20px rgba(0,0,0,0.45);
+    --thl-shadow-modal: 0 5px 15px rgba(0,0,0,0.5);
+    color-scheme: dark;
+  }
+}
+
+[data-thl-color-mode="dark"][data-thl-theme^="default"] {
+  --thl-theme-text: #45a4da;
+}
+
+@media (prefers-color-scheme: dark) {
+  [data-thl-color-mode="auto"][data-thl-theme^="default"] {
+    --thl-theme-text: #45a4da;
+  }
+}
+
+[data-thl-color-mode="dark"][data-thl-theme^="green"] {
+  --thl-theme-text: #2ecc71;
+}
+
+@media (prefers-color-scheme: dark) {
+  [data-thl-color-mode="auto"][data-thl-theme^="green"] {
+    --thl-theme-text: #2ecc71;
+  }
+}
+
+[data-thl-color-mode="dark"][data-thl-theme^="yellow"] {
+  --thl-theme-text: #ffb136;
+}
+
+@media (prefers-color-scheme: dark) {
+  [data-thl-color-mode="auto"][data-thl-theme^="yellow"] {
+    --thl-theme-text: #ffb136;
+  }
+}
+
+[data-thl-color-mode="dark"][data-thl-theme^="red"] {
+  --thl-theme-text: #ff7a5c;
+}
+
+@media (prefers-color-scheme: dark) {
+  [data-thl-color-mode="auto"][data-thl-theme^="red"] {
+    --thl-theme-text: #ff7a5c;
+  }
+}
+
+[data-thl-color-mode="dark"][data-thl-theme^="purple"] {
+  --thl-theme-text: #a58cf0;
+}
+
+@media (prefers-color-scheme: dark) {
+  [data-thl-color-mode="auto"][data-thl-theme^="purple"] {
+    --thl-theme-text: #a58cf0;
+  }
+}
+
+[data-thl-color-mode="dark"][data-thl-theme^="black"] {
+  --thl-theme-text: #c3c9cd;
+}
+
+@media (prefers-color-scheme: dark) {
+  [data-thl-color-mode="auto"][data-thl-theme^="black"] {
+    --thl-theme-text: #c3c9cd;
+  }
+}
+
+[data-thl-color-mode="dark"][data-thl-theme$="-dark"] {
+  --thl-sidebar-bg: #22262e;
+}
+
+[data-thl-radius="sharp"] {
+  --thl-radius-sm: 0;
+  --thl-radius: 0;
+  --thl-radius-lg: 0;
+}
+
+[data-thl-size="sm"] {
+  --thl-font-size: 13px;
+  --thl-control-height: 32px;
+}
+
+[data-thl-size="lg"] {
+  --thl-font-size: 15px;
+  --thl-control-height: 44px;
+}

package/package.json

@@ -1,6 +1,50 @@
 {
   "name": "@thl-ui/styles",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.1",
+  "description": "thl-ui CSS: --thl-* tokens, 12 skins, dark mode and three admin layouts. No Bootstrap, no jQuery.",
+  "keywords": [
+    "thl-ui",
+    "ui",
+    "components",
+    "admin",
+    "dashboard",
+    "css",
+    "scss",
+    "theme",
+    "dark-mode"
+  ],
+  "license": "MIT",
+  "homepage": "https://thl.tandd.dev/guide/theming",
+  "repository": {
+    "type": "git",
+    "url": "git+https://gitlab.com/tandd.packages/thl-ui.git",
+    "directory": "packages/styles"
+  },
+  "bugs": {
+    "url": "https://gitlab.com/tandd.packages/thl-ui/-/issues"
+  },
+  "type": "module",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "exports": {
+    ".": "./dist/thl-ui.css",
+    "./thl-ui.css": "./dist/thl-ui.css",
+    "./tokens.css": "./dist/tokens.css",
+    "./scss/*": "./src/*",
+    "./components/*": "./dist/components/*",
+    "./fonts.css": "./dist/fonts.css",
+    "./fonts/*": "./dist/fonts/*"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "scripts": {
+    "build": "node ./scripts/build.mjs"
+  },
+  "dependencies": {
+    "@thl-ui/tokens": "0.1.1",
+    "@fontsource-variable/open-sans": "^5.3.0"
+  }
+}