@stfrigerio/sito-template 0.1.68 → 0.1.69
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.
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
/* Derived color variants — computed from base theme colors via color-mix() */
|
|
2
|
+
/* Requires: Chrome 111+, Firefox 113+, Safari 16.4+ */
|
|
3
|
+
|
|
4
|
+
/* ── Light theme derivations ─────────────────────────────────── */
|
|
5
|
+
:root:not([data-theme*="dark"]),
|
|
6
|
+
:root[data-theme="default"],
|
|
7
|
+
[data-theme="lossito"],
|
|
8
|
+
[data-theme="dao"] {
|
|
9
|
+
/* Primary variants */
|
|
10
|
+
--color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, black);
|
|
11
|
+
--color-primary-active: color-mix(in oklch, var(--color-primary) 70%, black);
|
|
12
|
+
--color-primary-light: color-mix(in oklch, var(--color-primary) 35%, white);
|
|
13
|
+
--color-primary-lighter: color-mix(in oklch, var(--color-primary) 20%, white);
|
|
14
|
+
|
|
15
|
+
/* Secondary variants */
|
|
16
|
+
--color-secondary-hover: color-mix(in oklch, var(--color-secondary) 85%, black);
|
|
17
|
+
--color-secondary-active: color-mix(in oklch, var(--color-secondary) 70%, black);
|
|
18
|
+
--color-secondary-light: color-mix(in oklch, var(--color-secondary) 35%, white);
|
|
19
|
+
--color-secondary-lighter: color-mix(in oklch, var(--color-secondary) 20%, white);
|
|
20
|
+
|
|
21
|
+
/* Accent variants */
|
|
22
|
+
--color-accent-hover: color-mix(in oklch, var(--color-accent) 85%, black);
|
|
23
|
+
--color-accent-active: color-mix(in oklch, var(--color-accent) 70%, black);
|
|
24
|
+
|
|
25
|
+
/* Status hover/active */
|
|
26
|
+
--color-success-hover: color-mix(in oklch, var(--color-success) 85%, black);
|
|
27
|
+
--color-success-active: color-mix(in oklch, var(--color-success) 70%, black);
|
|
28
|
+
--color-error-hover: color-mix(in oklch, var(--color-error) 85%, black);
|
|
29
|
+
--color-error-active: color-mix(in oklch, var(--color-error) 70%, black);
|
|
30
|
+
--color-warning-hover: color-mix(in oklch, var(--color-warning) 85%, black);
|
|
31
|
+
--color-warning-active: color-mix(in oklch, var(--color-warning) 70%, black);
|
|
32
|
+
--color-info-hover: color-mix(in oklch, var(--color-info) 85%, black);
|
|
33
|
+
--color-info-active: color-mix(in oklch, var(--color-info) 70%, black);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
/* ── Dark theme derivations ──────────────────────────────────── */
|
|
37
|
+
[data-theme="dark"],
|
|
38
|
+
[data-theme="lossito-dark"],
|
|
39
|
+
[data-theme="dao-dark"] {
|
|
40
|
+
/* Primary variants — go lighter on dark backgrounds */
|
|
41
|
+
--color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, white);
|
|
42
|
+
--color-primary-active: color-mix(in oklch, var(--color-primary) 85%, black);
|
|
43
|
+
--color-primary-light: color-mix(in oklch, var(--color-primary) 50%, black);
|
|
44
|
+
--color-primary-lighter: color-mix(in oklch, var(--color-primary) 30%, black);
|
|
45
|
+
|
|
46
|
+
/* Secondary variants */
|
|
47
|
+
--color-secondary-hover: color-mix(in oklch, var(--color-secondary) 85%, white);
|
|
48
|
+
--color-secondary-active: color-mix(in oklch, var(--color-secondary) 85%, black);
|
|
49
|
+
--color-secondary-light: color-mix(in oklch, var(--color-secondary) 50%, black);
|
|
50
|
+
--color-secondary-lighter: color-mix(in oklch, var(--color-secondary) 30%, black);
|
|
51
|
+
|
|
52
|
+
/* Accent variants */
|
|
53
|
+
--color-accent-hover: color-mix(in oklch, var(--color-accent) 85%, white);
|
|
54
|
+
--color-accent-active: color-mix(in oklch, var(--color-accent) 85%, black);
|
|
55
|
+
|
|
56
|
+
/* Status hover/active */
|
|
57
|
+
--color-success-hover: color-mix(in oklch, var(--color-success) 80%, white);
|
|
58
|
+
--color-success-active: color-mix(in oklch, var(--color-success) 85%, black);
|
|
59
|
+
--color-error-hover: color-mix(in oklch, var(--color-error) 80%, white);
|
|
60
|
+
--color-error-active: color-mix(in oklch, var(--color-error) 85%, black);
|
|
61
|
+
--color-warning-hover: color-mix(in oklch, var(--color-warning) 80%, white);
|
|
62
|
+
--color-warning-active: color-mix(in oklch, var(--color-warning) 85%, black);
|
|
63
|
+
--color-info-hover: color-mix(in oklch, var(--color-info) 80%, white);
|
|
64
|
+
--color-info-active: color-mix(in oklch, var(--color-info) 85%, black);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
/* ── Always derived ──────────────────────────────────────────── */
|
|
68
|
+
:root,
|
|
69
|
+
[data-theme] {
|
|
70
|
+
--color-border-focus: var(--color-primary);
|
|
71
|
+
}
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
/* Shared theme values — status colors and shadows that only vary by light/dark */
|
|
2
|
+
|
|
3
|
+
/* ── Light themes ────────────────────────────────────────────── */
|
|
4
|
+
:root:not([data-theme*="dark"]),
|
|
5
|
+
:root[data-theme="default"],
|
|
6
|
+
[data-theme="lossito"],
|
|
7
|
+
[data-theme="dao"] {
|
|
8
|
+
/* Status: Success */
|
|
9
|
+
--color-success: #10b981;
|
|
10
|
+
--color-success-light: #34d399;
|
|
11
|
+
--color-success-bg: #d1fae5;
|
|
12
|
+
|
|
13
|
+
/* Status: Error */
|
|
14
|
+
--color-error: #ef4444;
|
|
15
|
+
--color-error-light: #fb7185;
|
|
16
|
+
--color-error-bg: #fee2e2;
|
|
17
|
+
|
|
18
|
+
/* Status: Warning */
|
|
19
|
+
--color-warning: #f59e0b;
|
|
20
|
+
--color-warning-light: #fbbf24;
|
|
21
|
+
--color-warning-bg: #fef3c7;
|
|
22
|
+
|
|
23
|
+
/* Status: Info */
|
|
24
|
+
--color-info: #0ea5e9;
|
|
25
|
+
--color-info-light: #38bdf8;
|
|
26
|
+
--color-info-bg: #e0f2fe;
|
|
27
|
+
|
|
28
|
+
/* Shadows */
|
|
29
|
+
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
30
|
+
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
|
|
31
|
+
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
32
|
+
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.05);
|
|
33
|
+
--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.08), 0 10px 10px rgba(0, 0, 0, 0.04);
|
|
34
|
+
--shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.12);
|
|
35
|
+
--shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
/* ── Dark themes ─────────────────────────────────────────────── */
|
|
39
|
+
[data-theme="dark"],
|
|
40
|
+
[data-theme="lossito-dark"],
|
|
41
|
+
[data-theme="dao-dark"] {
|
|
42
|
+
/* Status: Success */
|
|
43
|
+
--color-success: #34d399;
|
|
44
|
+
--color-success-light: #6ee7b7;
|
|
45
|
+
--color-success-bg: #064e3b;
|
|
46
|
+
|
|
47
|
+
/* Status: Error */
|
|
48
|
+
--color-error: #fb7185;
|
|
49
|
+
--color-error-light: #fda4af;
|
|
50
|
+
--color-error-bg: #881337;
|
|
51
|
+
|
|
52
|
+
/* Status: Warning */
|
|
53
|
+
--color-warning: #fbbf24;
|
|
54
|
+
--color-warning-light: #fcd34d;
|
|
55
|
+
--color-warning-bg: #451a03;
|
|
56
|
+
|
|
57
|
+
/* Status: Info */
|
|
58
|
+
--color-info: #38bdf8;
|
|
59
|
+
--color-info-light: #7dd3fc;
|
|
60
|
+
--color-info-bg: #082f49;
|
|
61
|
+
|
|
62
|
+
/* Shadows */
|
|
63
|
+
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25);
|
|
64
|
+
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.3);
|
|
65
|
+
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.25);
|
|
66
|
+
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.35), 0 4px 6px rgba(0, 0, 0, 0.25);
|
|
67
|
+
--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.35), 0 10px 10px rgba(0, 0, 0, 0.25);
|
|
68
|
+
--shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.45);
|
|
69
|
+
--shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.25);
|
|
70
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stfrigerio/sito-template",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.69",
|
|
4
4
|
"description": "A library of React components with animations for quick website development",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.esm.js",
|
|
@@ -20,6 +20,8 @@
|
|
|
20
20
|
"./themes/default": "./dist/themes/default.css",
|
|
21
21
|
"./themes/lossito": "./dist/themes/lossito.css",
|
|
22
22
|
"./themes/dao": "./dist/themes/dao.css",
|
|
23
|
+
"./themes/shared": "./dist/themes/shared.css",
|
|
24
|
+
"./themes/derived": "./dist/themes/derived.css",
|
|
23
25
|
"./themes/globals": "./dist/themes/globals.css",
|
|
24
26
|
"./atoms": {
|
|
25
27
|
"import": "./dist/components/atoms/index.esm.js",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"generatedAt":
|
|
1
|
+
{"generatedAt":1776159421675,"userSince":1751553154248,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":true,"hasStorybookEslint":true,"refCount":0,"testPackages":{"@chromatic-com/storybook":"4.1.0","@testing-library/jest-dom":"6.9.1","@testing-library/react":"16.3.2","@testing-library/user-event":null,"vitest":"4.1.4"},"hasRouterPackage":true,"packageManager":{"type":"npm","agent":"npm","nodeLinker":"node_modules"},"preview":{"usesGlobals":true},"framework":{"name":"@storybook/react-vite","options":{}},"builder":"@storybook/builder-vite","renderer":"@storybook/react","portableStoriesFileCount":0,"applicationFileCount":0,"storybookVersion":"9.1.2","language":"typescript","storybookPackages":{"@chromatic-com/storybook":{"version":"4.1.0"},"@storybook/addon-docs":{"version":"9.1.2"},"@storybook/addon-onboarding":{"version":"9.1.2"},"@storybook/react-vite":{"version":"9.1.2"},"eslint-plugin-storybook":{"version":"9.1.2"},"storybook":{"version":"9.1.2"}},"addons":{"@storybook/addon-links":{"version":"9.1.2"}}}
|