@5voltfx/design-system 0.1.0 → 0.1.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.
- package/dist/chunk-3LTHHL5C.js +11 -0
- package/dist/chunk-3LTHHL5C.js.map +1 -0
- package/dist/chunk-5KN5TPGG.js +30 -0
- package/dist/chunk-5KN5TPGG.js.map +1 -0
- package/dist/chunk-AYAMNHNF.js +1 -0
- package/dist/chunk-AYAMNHNF.js.map +1 -0
- package/dist/chunk-BOPVPQLB.js +25 -0
- package/dist/chunk-BOPVPQLB.js.map +1 -0
- package/dist/chunk-EW3S3GK6.js +41 -0
- package/dist/chunk-EW3S3GK6.js.map +1 -0
- package/dist/chunk-NE25337V.js +1 -0
- package/dist/chunk-NE25337V.js.map +1 -0
- package/dist/chunk-SFECTSQP.js +68 -0
- package/dist/chunk-SFECTSQP.js.map +1 -0
- package/dist/chunk-TNWQQ56F.js +19 -0
- package/dist/chunk-TNWQQ56F.js.map +1 -0
- package/dist/chunk-U6JTDANG.js +22 -0
- package/dist/chunk-U6JTDANG.js.map +1 -0
- package/dist/chunk-YCZXDQJZ.js +41 -0
- package/dist/chunk-YCZXDQJZ.js.map +1 -0
- package/{src/components/Button/Button.css → dist/components/Button/index.css} +2 -11
- package/dist/components/Button/index.css.map +1 -0
- package/dist/components/Button/index.js +7 -0
- package/dist/components/Button/index.js.map +1 -0
- package/{src/components/Card/Card.css → dist/components/Card/index.css} +3 -3
- package/dist/components/Card/index.css.map +1 -0
- package/dist/components/Card/index.js +7 -0
- package/dist/components/Card/index.js.map +1 -0
- package/{src/components/Footer/Footer.css → dist/components/Footer/index.css} +28 -7
- package/dist/components/Footer/index.css.map +1 -0
- package/dist/components/Footer/index.js +8 -0
- package/dist/components/Footer/index.js.map +1 -0
- package/dist/components/Header/index.css +98 -0
- package/dist/components/Header/index.css.map +1 -0
- package/dist/components/Header/index.js +8 -0
- package/dist/components/Header/index.js.map +1 -0
- package/{src/components/Layout/Layout.css → dist/components/Layout/index.css} +2 -4
- package/dist/components/Layout/index.css.map +1 -0
- package/dist/components/Layout/index.js +11 -0
- package/dist/components/Layout/index.js.map +1 -0
- package/{src/components/Nav/Nav.css → dist/components/Nav/index.css} +2 -8
- package/dist/components/Nav/index.css.map +1 -0
- package/dist/components/Nav/index.js +8 -0
- package/dist/components/Nav/index.js.map +1 -0
- package/{src/components/ThemeSwitcher/ThemeSwitcher.css → dist/components/ThemeSwitcher/index.css} +3 -7
- package/dist/components/ThemeSwitcher/index.css.map +1 -0
- package/dist/components/ThemeSwitcher/index.js +8 -0
- package/dist/components/ThemeSwitcher/index.js.map +1 -0
- package/dist/components/Typography/index.css +50 -0
- package/dist/components/Typography/index.css.map +1 -0
- package/dist/components/Typography/index.js +9 -0
- package/dist/components/Typography/index.js.map +1 -0
- package/dist/index.css +544 -0
- package/dist/index.css.map +1 -0
- package/dist/index.js +116 -0
- package/dist/index.js.map +1 -0
- package/package.json +19 -6
- package/vite-plugin.js +13 -10
- package/src/components/Button/Button.jsx +0 -20
- package/src/components/Button/index.js +0 -1
- package/src/components/Card/Card.jsx +0 -6
- package/src/components/Card/index.js +0 -1
- package/src/components/Footer/Footer.jsx +0 -37
- package/src/components/Footer/index.js +0 -1
- package/src/components/Header/Header.css +0 -47
- package/src/components/Header/Header.jsx +0 -30
- package/src/components/Header/index.js +0 -1
- package/src/components/Layout/Container.jsx +0 -10
- package/src/components/Layout/Grid.jsx +0 -22
- package/src/components/Layout/Stack.jsx +0 -24
- package/src/components/Layout/index.js +0 -3
- package/src/components/Nav/Nav.jsx +0 -29
- package/src/components/Nav/index.js +0 -1
- package/src/components/ThemeSwitcher/ThemeSwitcher.jsx +0 -26
- package/src/components/ThemeSwitcher/index.js +0 -1
- package/src/components/Typography/Heading.jsx +0 -29
- package/src/components/Typography/Text.jsx +0 -20
- package/src/components/Typography/Typography.css +0 -35
- package/src/components/Typography/index.js +0 -2
- package/src/index.js +0 -12
- package/src/theme/ThemeContext.js +0 -3
- package/src/theme/ThemeProvider.jsx +0 -66
- package/src/theme/themeConstants.js +0 -12
- package/src/theme/useTheme.js +0 -10
- package/src/tokens/base.css +0 -21
- package/src/tokens/colors.css +0 -29
- package/src/tokens/elevation.css +0 -10
- package/src/tokens/index.css +0 -8
- package/src/tokens/motion.css +0 -6
- package/src/tokens/radius.css +0 -6
- package/src/tokens/spacing.css +0 -10
- package/src/tokens/themes.css +0 -156
- package/src/tokens/typography.css +0 -29
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -1,26 +1,24 @@
|
|
|
1
|
+
/* src/components/Layout/Layout.css */
|
|
1
2
|
.ds-container {
|
|
2
3
|
max-width: 1200px;
|
|
3
4
|
margin: 0 auto;
|
|
4
5
|
padding: 0 var(--ds-space-6);
|
|
5
6
|
}
|
|
6
|
-
|
|
7
7
|
@media (width <= 660px) {
|
|
8
8
|
.ds-container {
|
|
9
9
|
padding: 0 var(--ds-space-4);
|
|
10
10
|
}
|
|
11
11
|
}
|
|
12
|
-
|
|
13
12
|
.ds-stack {
|
|
14
13
|
display: flex;
|
|
15
14
|
gap: var(--ds-stack-gap, var(--ds-space-4));
|
|
16
15
|
}
|
|
17
|
-
|
|
18
16
|
.ds-grid {
|
|
19
17
|
display: grid;
|
|
20
18
|
}
|
|
21
|
-
|
|
22
19
|
@media (width <= 660px) {
|
|
23
20
|
.ds-grid {
|
|
24
21
|
grid-template-columns: 1fr !important;
|
|
25
22
|
}
|
|
26
23
|
}
|
|
24
|
+
/*# sourceMappingURL=index.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Layout/Layout.css"],"sourcesContent":[".ds-container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 var(--ds-space-6);\n}\n\n@media (width <= 660px) {\n .ds-container {\n padding: 0 var(--ds-space-4);\n }\n}\n\n.ds-stack {\n display: flex;\n gap: var(--ds-stack-gap, var(--ds-space-4));\n}\n\n.ds-grid {\n display: grid;\n}\n\n@media (width <= 660px) {\n .ds-grid {\n grid-template-columns: 1fr !important;\n }\n}\n"],"mappings":";AAAA,CAAC;AACC,aAAW;AACX,UAAQ,EAAE;AACV,WAAS,EAAE,IAAI;AACjB;AAEA,QAAQ,SAAS;AACf,GAPD;AAQG,aAAS,EAAE,IAAI;AACjB;AACF;AAEA,CAAC;AACC,WAAS;AACT,OAAK,IAAI,cAAc,EAAE,IAAI;AAC/B;AAEA,CAAC;AACC,WAAS;AACX;AAEA,QAAQ,SAAS;AACf,GALD;AAMG,2BAAuB;AACzB;AACF;","names":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/* src/components/Nav/Nav.css */
|
|
1
2
|
.ds-nav__list {
|
|
2
3
|
display: flex;
|
|
3
4
|
align-items: center;
|
|
@@ -6,7 +7,6 @@
|
|
|
6
7
|
margin: 0;
|
|
7
8
|
padding: 0;
|
|
8
9
|
}
|
|
9
|
-
|
|
10
10
|
.ds-nav__link {
|
|
11
11
|
position: relative;
|
|
12
12
|
display: inline-block;
|
|
@@ -20,7 +20,6 @@
|
|
|
20
20
|
text-decoration: none;
|
|
21
21
|
transition: color var(--ds-motion-duration-base) var(--ds-motion-ease-standard);
|
|
22
22
|
}
|
|
23
|
-
|
|
24
23
|
.ds-nav__link::after {
|
|
25
24
|
content: "";
|
|
26
25
|
position: absolute;
|
|
@@ -33,29 +32,24 @@
|
|
|
33
32
|
transform-origin: left;
|
|
34
33
|
transition: transform var(--ds-motion-duration-base) var(--ds-motion-ease-standard);
|
|
35
34
|
}
|
|
36
|
-
|
|
37
35
|
.ds-nav__link:hover {
|
|
38
36
|
color: var(--ds-color-font-0);
|
|
39
37
|
}
|
|
40
|
-
|
|
41
38
|
.ds-nav__link:hover::after {
|
|
42
39
|
transform: scaleX(1);
|
|
43
40
|
}
|
|
44
|
-
|
|
45
41
|
.ds-nav__link--active {
|
|
46
42
|
color: var(--ds-color-font-0);
|
|
47
43
|
}
|
|
48
|
-
|
|
49
44
|
.ds-nav__link--active::after {
|
|
50
45
|
transform: scaleX(1);
|
|
51
46
|
}
|
|
52
|
-
|
|
53
47
|
@media (width <= 660px) {
|
|
54
48
|
.ds-nav__list {
|
|
55
49
|
gap: var(--ds-space-3);
|
|
56
50
|
}
|
|
57
|
-
|
|
58
51
|
.ds-nav__link {
|
|
59
52
|
font-size: 0.75rem;
|
|
60
53
|
}
|
|
61
54
|
}
|
|
55
|
+
/*# sourceMappingURL=index.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Nav/Nav.css"],"sourcesContent":[".ds-nav__list {\n display: flex;\n align-items: center;\n gap: var(--ds-space-5);\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\n.ds-nav__link {\n position: relative;\n display: inline-block;\n padding: var(--ds-space-2) 0;\n color: var(--ds-color-font-1);\n font-family: var(--ds-font-body);\n font-weight: var(--ds-font-weight-medium);\n font-size: var(--ds-font-size-100);\n text-transform: uppercase;\n letter-spacing: 0.04em;\n text-decoration: none;\n transition: color var(--ds-motion-duration-base) var(--ds-motion-ease-standard);\n}\n\n.ds-nav__link::after {\n content: \"\";\n position: absolute;\n left: 0;\n bottom: -2px;\n width: 100%;\n height: 2px;\n background-color: var(--ds-color-bg-2);\n transform: scaleX(0);\n transform-origin: left;\n transition: transform var(--ds-motion-duration-base) var(--ds-motion-ease-standard);\n}\n\n.ds-nav__link:hover {\n color: var(--ds-color-font-0);\n}\n\n.ds-nav__link:hover::after {\n transform: scaleX(1);\n}\n\n.ds-nav__link--active {\n color: var(--ds-color-font-0);\n}\n\n.ds-nav__link--active::after {\n transform: scaleX(1);\n}\n\n@media (width <= 660px) {\n .ds-nav__list {\n gap: var(--ds-space-3);\n }\n\n .ds-nav__link {\n font-size: 0.75rem;\n }\n}\n"],"mappings":";AAAA,CAAC;AACC,WAAS;AACT,eAAa;AACb,OAAK,IAAI;AACT,cAAY;AACZ,UAAQ;AACR,WAAS;AACX;AAEA,CAAC;AACC,YAAU;AACV,WAAS;AACT,WAAS,IAAI,cAAc;AAC3B,SAAO,IAAI;AACX,eAAa,IAAI;AACjB,eAAa,IAAI;AACjB,aAAW,IAAI;AACf,kBAAgB;AAChB,kBAAgB;AAChB,mBAAiB;AACjB,cAAY,MAAM,IAAI,2BAA2B,IAAI;AACvD;AAEA,CAdC,YAcY;AACX,WAAS;AACT,YAAU;AACV,QAAM;AACN,UAAQ;AACR,SAAO;AACP,UAAQ;AACR,oBAAkB,IAAI;AACtB,aAAW,OAAO;AAClB,oBAAkB;AAClB,cAAY,UAAU,IAAI,2BAA2B,IAAI;AAC3D;AAEA,CA3BC,YA2BY;AACX,SAAO,IAAI;AACb;AAEA,CA/BC,YA+BY,MAAM;AACjB,aAAW,OAAO;AACpB;AAEA,CAAC;AACC,SAAO,IAAI;AACb;AAEA,CAJC,oBAIoB;AACnB,aAAW,OAAO;AACpB;AAEA,QAAQ,SAAS;AACf,GArDD;AAsDG,SAAK,IAAI;AACX;AAEA,GAhDD;AAiDG,eAAW;AACb;AACF;","names":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
package/{src/components/ThemeSwitcher/ThemeSwitcher.css → dist/components/ThemeSwitcher/index.css}
RENAMED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
+
/* src/components/ThemeSwitcher/ThemeSwitcher.css */
|
|
1
2
|
.ds-theme-switcher {
|
|
2
3
|
display: flex;
|
|
3
4
|
align-items: center;
|
|
4
5
|
gap: var(--ds-space-2);
|
|
5
6
|
}
|
|
6
|
-
|
|
7
7
|
.ds-theme-switcher__swatch {
|
|
8
8
|
width: 20px;
|
|
9
9
|
height: 20px;
|
|
@@ -11,20 +11,16 @@
|
|
|
11
11
|
border: 2px solid transparent;
|
|
12
12
|
cursor: pointer;
|
|
13
13
|
padding: 0;
|
|
14
|
-
transition:
|
|
15
|
-
transform var(--ds-motion-duration-fast) var(--ds-motion-ease-standard),
|
|
16
|
-
border-color var(--ds-motion-duration-base) var(--ds-motion-ease-standard);
|
|
14
|
+
transition: transform var(--ds-motion-duration-fast) var(--ds-motion-ease-standard), border-color var(--ds-motion-duration-base) var(--ds-motion-ease-standard);
|
|
17
15
|
}
|
|
18
|
-
|
|
19
16
|
.ds-theme-switcher__swatch:hover {
|
|
20
17
|
transform: scale(1.15);
|
|
21
18
|
}
|
|
22
|
-
|
|
23
19
|
.ds-theme-switcher__swatch--active {
|
|
24
20
|
border-color: var(--ds-color-font-0);
|
|
25
21
|
}
|
|
26
|
-
|
|
27
22
|
.ds-theme-switcher__swatch:focus-visible {
|
|
28
23
|
outline: 2px solid var(--ds-color-bg-2);
|
|
29
24
|
outline-offset: 2px;
|
|
30
25
|
}
|
|
26
|
+
/*# sourceMappingURL=index.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ThemeSwitcher/ThemeSwitcher.css"],"sourcesContent":[".ds-theme-switcher {\n display: flex;\n align-items: center;\n gap: var(--ds-space-2);\n}\n\n.ds-theme-switcher__swatch {\n width: 20px;\n height: 20px;\n border-radius: var(--ds-radius-pill);\n border: 2px solid transparent;\n cursor: pointer;\n padding: 0;\n transition:\n transform var(--ds-motion-duration-fast) var(--ds-motion-ease-standard),\n border-color var(--ds-motion-duration-base) var(--ds-motion-ease-standard);\n}\n\n.ds-theme-switcher__swatch:hover {\n transform: scale(1.15);\n}\n\n.ds-theme-switcher__swatch--active {\n border-color: var(--ds-color-font-0);\n}\n\n.ds-theme-switcher__swatch:focus-visible {\n outline: 2px solid var(--ds-color-bg-2);\n outline-offset: 2px;\n}\n"],"mappings":";AAAA,CAAC;AACC,WAAS;AACT,eAAa;AACb,OAAK,IAAI;AACX;AAEA,CAAC;AACC,SAAO;AACP,UAAQ;AACR,iBAAe,IAAI;AACnB,UAAQ,IAAI,MAAM;AAClB,UAAQ;AACR,WAAS;AACT,cACE,UAAU,IAAI,2BAA2B,IAAI,0BAA0B,EACvE,aAAa,IAAI,2BAA2B,IAAI;AACpD;AAEA,CAZC,yBAYyB;AACxB,aAAW,MAAM;AACnB;AAEA,CAAC;AACC,gBAAc,IAAI;AACpB;AAEA,CApBC,yBAoByB;AACxB,WAAS,IAAI,MAAM,IAAI;AACvB,kBAAgB;AAClB;","names":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
/* src/components/Typography/Typography.css */
|
|
2
|
+
.ds-heading {
|
|
3
|
+
margin: 0;
|
|
4
|
+
font-family: var(--ds-font-body);
|
|
5
|
+
font-weight: var(--ds-font-weight-bold);
|
|
6
|
+
line-height: var(--ds-line-height-tight);
|
|
7
|
+
color: var(--ds-color-font-0);
|
|
8
|
+
}
|
|
9
|
+
.ds-heading--decorative {
|
|
10
|
+
font-family: var(--ds-font-decorative);
|
|
11
|
+
font-weight: var(--ds-font-weight-regular);
|
|
12
|
+
}
|
|
13
|
+
.ds-heading--700 {
|
|
14
|
+
font-size: var(--ds-font-size-700);
|
|
15
|
+
}
|
|
16
|
+
.ds-heading--600 {
|
|
17
|
+
font-size: var(--ds-font-size-600);
|
|
18
|
+
}
|
|
19
|
+
.ds-heading--500 {
|
|
20
|
+
font-size: var(--ds-font-size-500);
|
|
21
|
+
}
|
|
22
|
+
.ds-heading--400 {
|
|
23
|
+
font-size: var(--ds-font-size-400);
|
|
24
|
+
}
|
|
25
|
+
.ds-heading--300 {
|
|
26
|
+
font-size: var(--ds-font-size-300);
|
|
27
|
+
}
|
|
28
|
+
.ds-heading--200 {
|
|
29
|
+
font-size: var(--ds-font-size-200);
|
|
30
|
+
}
|
|
31
|
+
.ds-text {
|
|
32
|
+
margin: 0;
|
|
33
|
+
font-family: var(--ds-font-body);
|
|
34
|
+
font-weight: var(--ds-font-weight-regular);
|
|
35
|
+
line-height: var(--ds-line-height-normal);
|
|
36
|
+
color: var(--ds-color-font-0);
|
|
37
|
+
}
|
|
38
|
+
.ds-text--100 {
|
|
39
|
+
font-size: var(--ds-font-size-100);
|
|
40
|
+
}
|
|
41
|
+
.ds-text--200 {
|
|
42
|
+
font-size: var(--ds-font-size-200);
|
|
43
|
+
}
|
|
44
|
+
.ds-text--300 {
|
|
45
|
+
font-size: var(--ds-font-size-300);
|
|
46
|
+
}
|
|
47
|
+
.ds-text--muted {
|
|
48
|
+
color: var(--ds-color-font-1);
|
|
49
|
+
}
|
|
50
|
+
/*# sourceMappingURL=index.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Typography/Typography.css"],"sourcesContent":[".ds-heading {\n margin: 0;\n font-family: var(--ds-font-body);\n font-weight: var(--ds-font-weight-bold);\n line-height: var(--ds-line-height-tight);\n color: var(--ds-color-font-0);\n}\n\n.ds-heading--decorative {\n font-family: var(--ds-font-decorative);\n font-weight: var(--ds-font-weight-regular);\n}\n\n.ds-heading--700 { font-size: var(--ds-font-size-700); }\n.ds-heading--600 { font-size: var(--ds-font-size-600); }\n.ds-heading--500 { font-size: var(--ds-font-size-500); }\n.ds-heading--400 { font-size: var(--ds-font-size-400); }\n.ds-heading--300 { font-size: var(--ds-font-size-300); }\n.ds-heading--200 { font-size: var(--ds-font-size-200); }\n\n.ds-text {\n margin: 0;\n font-family: var(--ds-font-body);\n font-weight: var(--ds-font-weight-regular);\n line-height: var(--ds-line-height-normal);\n color: var(--ds-color-font-0);\n}\n\n.ds-text--100 { font-size: var(--ds-font-size-100); }\n.ds-text--200 { font-size: var(--ds-font-size-200); }\n.ds-text--300 { font-size: var(--ds-font-size-300); }\n\n.ds-text--muted {\n color: var(--ds-color-font-1);\n}\n"],"mappings":";AAAA,CAAC;AACC,UAAQ;AACR,eAAa,IAAI;AACjB,eAAa,IAAI;AACjB,eAAa,IAAI;AACjB,SAAO,IAAI;AACb;AAEA,CAAC;AACC,eAAa,IAAI;AACjB,eAAa,IAAI;AACnB;AAEA,CAAC;AAAkB,aAAW,IAAI;AAAqB;AACvD,CAAC;AAAkB,aAAW,IAAI;AAAqB;AACvD,CAAC;AAAkB,aAAW,IAAI;AAAqB;AACvD,CAAC;AAAkB,aAAW,IAAI;AAAqB;AACvD,CAAC;AAAkB,aAAW,IAAI;AAAqB;AACvD,CAAC;AAAkB,aAAW,IAAI;AAAqB;AAEvD,CAAC;AACC,UAAQ;AACR,eAAa,IAAI;AACjB,eAAa,IAAI;AACjB,eAAa,IAAI;AACjB,SAAO,IAAI;AACb;AAEA,CAAC;AAAe,aAAW,IAAI;AAAqB;AACpD,CAAC;AAAe,aAAW,IAAI;AAAqB;AACpD,CAAC;AAAe,aAAW,IAAI;AAAqB;AAEpD,CAAC;AACC,SAAO,IAAI;AACb;","names":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|