@octavius2929-personal/design-system 0.4.0 → 0.5.0
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/index.cjs +22 -22
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +466 -495
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +8 -38
- package/dist/index.d.ts +8 -38
- package/dist/index.js +22 -22
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -122,14 +122,8 @@ declare const tintaSchema: {
|
|
|
122
122
|
readonly tight: "-0.01em";
|
|
123
123
|
readonly normal: "0";
|
|
124
124
|
readonly wide: "0.04em";
|
|
125
|
-
readonly wider: "0.
|
|
126
|
-
readonly widest: "0.
|
|
127
|
-
};
|
|
128
|
-
leading: {
|
|
129
|
-
readonly tight: "1.05";
|
|
130
|
-
readonly snug: "1.2";
|
|
131
|
-
readonly normal: "1.5";
|
|
132
|
-
readonly relaxed: "1.7";
|
|
125
|
+
readonly wider: "0.1em";
|
|
126
|
+
readonly widest: "0.14em";
|
|
133
127
|
};
|
|
134
128
|
weight: {
|
|
135
129
|
readonly light: "300";
|
|
@@ -272,14 +266,8 @@ declare const tintaSchema: {
|
|
|
272
266
|
readonly tight: "-0.01em";
|
|
273
267
|
readonly normal: "0";
|
|
274
268
|
readonly wide: "0.04em";
|
|
275
|
-
readonly wider: "0.
|
|
276
|
-
readonly widest: "0.
|
|
277
|
-
};
|
|
278
|
-
leading: {
|
|
279
|
-
readonly tight: "1.05";
|
|
280
|
-
readonly snug: "1.2";
|
|
281
|
-
readonly normal: "1.5";
|
|
282
|
-
readonly relaxed: "1.7";
|
|
269
|
+
readonly wider: "0.1em";
|
|
270
|
+
readonly widest: "0.14em";
|
|
283
271
|
};
|
|
284
272
|
weight: {
|
|
285
273
|
readonly light: "300";
|
|
@@ -422,14 +410,8 @@ declare const tintaSchema: {
|
|
|
422
410
|
readonly tight: "-0.01em";
|
|
423
411
|
readonly normal: "0";
|
|
424
412
|
readonly wide: "0.04em";
|
|
425
|
-
readonly wider: "0.
|
|
426
|
-
readonly widest: "0.
|
|
427
|
-
};
|
|
428
|
-
leading: {
|
|
429
|
-
readonly tight: "1.05";
|
|
430
|
-
readonly snug: "1.2";
|
|
431
|
-
readonly normal: "1.5";
|
|
432
|
-
readonly relaxed: "1.7";
|
|
413
|
+
readonly wider: "0.1em";
|
|
414
|
+
readonly widest: "0.14em";
|
|
433
415
|
};
|
|
434
416
|
weight: {
|
|
435
417
|
readonly light: "300";
|
|
@@ -572,14 +554,8 @@ declare const tintaSchema: {
|
|
|
572
554
|
readonly tight: "-0.01em";
|
|
573
555
|
readonly normal: "0";
|
|
574
556
|
readonly wide: "0.04em";
|
|
575
|
-
readonly wider: "0.
|
|
576
|
-
readonly widest: "0.
|
|
577
|
-
};
|
|
578
|
-
leading: {
|
|
579
|
-
readonly tight: "1.05";
|
|
580
|
-
readonly snug: "1.2";
|
|
581
|
-
readonly normal: "1.5";
|
|
582
|
-
readonly relaxed: "1.7";
|
|
557
|
+
readonly wider: "0.1em";
|
|
558
|
+
readonly widest: "0.14em";
|
|
583
559
|
};
|
|
584
560
|
weight: {
|
|
585
561
|
readonly light: "300";
|
|
@@ -758,12 +734,6 @@ declare const vars: {
|
|
|
758
734
|
readonly wider: `var(--${string})`;
|
|
759
735
|
readonly widest: `var(--${string})`;
|
|
760
736
|
};
|
|
761
|
-
leading: {
|
|
762
|
-
readonly tight: `var(--${string})`;
|
|
763
|
-
readonly snug: `var(--${string})`;
|
|
764
|
-
readonly normal: `var(--${string})`;
|
|
765
|
-
readonly relaxed: `var(--${string})`;
|
|
766
|
-
};
|
|
767
737
|
dur: {
|
|
768
738
|
readonly fast: `var(--${string})`;
|
|
769
739
|
readonly base: `var(--${string})`;
|
package/dist/index.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
// src/theme/theme.css.ts
|
|
2
|
-
var colorVars = { bg1: "var(--
|
|
2
|
+
var colorVars = { bg1: "var(--bg1__e3grur28)", bg2: "var(--bg2__e3grur29)", bg3: "var(--bg3__e3grur2a)", bgInset: "var(--bgInset__e3grur2b)", fg1: "var(--fg1__e3grur2c)", fg2: "var(--fg2__e3grur2d)", fg3: "var(--fg3__e3grur2e)", fgOnAccent: "var(--fgOnAccent__e3grur2f)", border1: "var(--border1__e3grur2g)", border2: "var(--border2__e3grur2h)", borderStrong: "var(--borderStrong__e3grur2i)", accent: "var(--accent__e3grur2j)", accentHover: "var(--accentHover__e3grur2k)", accentSoft: "var(--accentSoft__e3grur2l)", ok: "var(--ok__e3grur2m)", warn: "var(--warn__e3grur2n)", danger: "var(--danger__e3grur2o)", info: "var(--info__e3grur2p)", focus: "var(--focus__e3grur2q)", scrim: "var(--scrim__e3grur2r)" };
|
|
3
3
|
var modeNames = ["light", "dark", "sepia", "contrast"];
|
|
4
4
|
var schemaNames = ["tinta"];
|
|
5
|
-
var themes = { tinta: { light: "
|
|
6
|
-
var vars = { font: { display: "var(--font-display__e3grur0)", text: "var(--font-text__e3grur1)", mono: "var(--font-mono__e3grur2)", black: "var(--font-black__e3grur3)" }, text: { eyebrow: { size: "var(--text-eyebrow-size__e3grur4)", lineHeight: "var(--text-eyebrow-lineHeight__e3grur5)", weight: "var(--text-eyebrow-weight__e3grur6)", letterSpacing: "var(--text-eyebrow-letterSpacing__e3grur7)" }, display: { size: "var(--text-display-size__e3grur8)", lineHeight: "var(--text-display-lineHeight__e3grur9)", weight: "var(--text-display-weight__e3grura)", letterSpacing: "var(--text-display-letterSpacing__e3grurb)" }, h1: { size: "var(--text-h1-size__e3grurc)", lineHeight: "var(--text-h1-lineHeight__e3grurd)", weight: "var(--text-h1-weight__e3grure)", letterSpacing: "var(--text-h1-letterSpacing__e3grurf)" }, h2: { size: "var(--text-h2-size__e3grurg)", lineHeight: "var(--text-h2-lineHeight__e3grurh)", weight: "var(--text-h2-weight__e3gruri)", letterSpacing: "var(--text-h2-letterSpacing__e3grurj)" }, h3: { size: "var(--text-h3-size__e3grurk)", lineHeight: "var(--text-h3-lineHeight__e3grurl)", weight: "var(--text-h3-weight__e3grurm)", letterSpacing: "var(--text-h3-letterSpacing__e3grurn)" }, h4: { size: "var(--text-h4-size__e3gruro)", lineHeight: "var(--text-h4-lineHeight__e3grurp)", weight: "var(--text-h4-weight__e3grurq)", letterSpacing: "var(--text-h4-letterSpacing__e3grurr)" }, body: { size: "var(--text-body-size__e3grurs)", lineHeight: "var(--text-body-lineHeight__e3grurt)", weight: "var(--text-body-weight__e3gruru)", letterSpacing: "var(--text-body-letterSpacing__e3grurv)" }, lead: { size: "var(--text-lead-size__e3grurw)", lineHeight: "var(--text-lead-lineHeight__e3grurx)", weight: "var(--text-lead-weight__e3grury)", letterSpacing: "var(--text-lead-letterSpacing__e3grurz)" }, small: { size: "var(--text-small-size__e3grur10)", lineHeight: "var(--text-small-lineHeight__e3grur11)", weight: "var(--text-small-weight__e3grur12)", letterSpacing: "var(--text-small-letterSpacing__e3grur13)" }, caption: { size: "var(--text-caption-size__e3grur14)", lineHeight: "var(--text-caption-lineHeight__e3grur15)", weight: "var(--text-caption-weight__e3grur16)", letterSpacing: "var(--text-caption-letterSpacing__e3grur17)" } }, space: { none: "var(--space-none__e3grur18)", xs: "var(--space-xs__e3grur19)", sm: "var(--space-sm__e3grur1a)", md: "var(--space-md__e3grur1b)", lg: "var(--space-lg__e3grur1c)", xl: "var(--space-xl__e3grur1d)", "2xl": "var(--space-2xl__e3grur1e)", "3xl": "var(--space-3xl__e3grur1f)", "4xl": "var(--space-4xl__e3grur1g)", "5xl": "var(--space-5xl__e3grur1h)" }, radius: { none: "var(--radius-none__e3grur1i)", sm: "var(--radius-sm__e3grur1j)", md: "var(--radius-md__e3grur1k)", lg: "var(--radius-lg__e3grur1l)", base: "var(--radius-base__e3grur1m)", full: "var(--radius-full__e3grur1n)" }, border: { hair: "var(--border-hair__e3grur1o)", rule: "var(--border-rule__e3grur1p)", heavy: "var(--border-heavy__e3grur1q)" }, tracking: { tight: "var(--tracking-tight__e3grur1r)", normal: "var(--tracking-normal__e3grur1s)", wide: "var(--tracking-wide__e3grur1t)", wider: "var(--tracking-wider__e3grur1u)", widest: "var(--tracking-widest__e3grur1v)" },
|
|
5
|
+
var themes = { tinta: { light: "theme_themes_tinta_light__e3grur2s", dark: "theme_themes_tinta_dark__e3grur2t", sepia: "theme_themes_tinta_sepia__e3grur2u", contrast: "theme_themes_tinta_contrast__e3grur2v" } };
|
|
6
|
+
var vars = { font: { display: "var(--font-display__e3grur0)", text: "var(--font-text__e3grur1)", mono: "var(--font-mono__e3grur2)", black: "var(--font-black__e3grur3)" }, text: { eyebrow: { size: "var(--text-eyebrow-size__e3grur4)", lineHeight: "var(--text-eyebrow-lineHeight__e3grur5)", weight: "var(--text-eyebrow-weight__e3grur6)", letterSpacing: "var(--text-eyebrow-letterSpacing__e3grur7)" }, display: { size: "var(--text-display-size__e3grur8)", lineHeight: "var(--text-display-lineHeight__e3grur9)", weight: "var(--text-display-weight__e3grura)", letterSpacing: "var(--text-display-letterSpacing__e3grurb)" }, h1: { size: "var(--text-h1-size__e3grurc)", lineHeight: "var(--text-h1-lineHeight__e3grurd)", weight: "var(--text-h1-weight__e3grure)", letterSpacing: "var(--text-h1-letterSpacing__e3grurf)" }, h2: { size: "var(--text-h2-size__e3grurg)", lineHeight: "var(--text-h2-lineHeight__e3grurh)", weight: "var(--text-h2-weight__e3gruri)", letterSpacing: "var(--text-h2-letterSpacing__e3grurj)" }, h3: { size: "var(--text-h3-size__e3grurk)", lineHeight: "var(--text-h3-lineHeight__e3grurl)", weight: "var(--text-h3-weight__e3grurm)", letterSpacing: "var(--text-h3-letterSpacing__e3grurn)" }, h4: { size: "var(--text-h4-size__e3gruro)", lineHeight: "var(--text-h4-lineHeight__e3grurp)", weight: "var(--text-h4-weight__e3grurq)", letterSpacing: "var(--text-h4-letterSpacing__e3grurr)" }, body: { size: "var(--text-body-size__e3grurs)", lineHeight: "var(--text-body-lineHeight__e3grurt)", weight: "var(--text-body-weight__e3gruru)", letterSpacing: "var(--text-body-letterSpacing__e3grurv)" }, lead: { size: "var(--text-lead-size__e3grurw)", lineHeight: "var(--text-lead-lineHeight__e3grurx)", weight: "var(--text-lead-weight__e3grury)", letterSpacing: "var(--text-lead-letterSpacing__e3grurz)" }, small: { size: "var(--text-small-size__e3grur10)", lineHeight: "var(--text-small-lineHeight__e3grur11)", weight: "var(--text-small-weight__e3grur12)", letterSpacing: "var(--text-small-letterSpacing__e3grur13)" }, caption: { size: "var(--text-caption-size__e3grur14)", lineHeight: "var(--text-caption-lineHeight__e3grur15)", weight: "var(--text-caption-weight__e3grur16)", letterSpacing: "var(--text-caption-letterSpacing__e3grur17)" } }, space: { none: "var(--space-none__e3grur18)", xs: "var(--space-xs__e3grur19)", sm: "var(--space-sm__e3grur1a)", md: "var(--space-md__e3grur1b)", lg: "var(--space-lg__e3grur1c)", xl: "var(--space-xl__e3grur1d)", "2xl": "var(--space-2xl__e3grur1e)", "3xl": "var(--space-3xl__e3grur1f)", "4xl": "var(--space-4xl__e3grur1g)", "5xl": "var(--space-5xl__e3grur1h)" }, radius: { none: "var(--radius-none__e3grur1i)", sm: "var(--radius-sm__e3grur1j)", md: "var(--radius-md__e3grur1k)", lg: "var(--radius-lg__e3grur1l)", base: "var(--radius-base__e3grur1m)", full: "var(--radius-full__e3grur1n)" }, border: { hair: "var(--border-hair__e3grur1o)", rule: "var(--border-rule__e3grur1p)", heavy: "var(--border-heavy__e3grur1q)" }, tracking: { tight: "var(--tracking-tight__e3grur1r)", normal: "var(--tracking-normal__e3grur1s)", wide: "var(--tracking-wide__e3grur1t)", wider: "var(--tracking-wider__e3grur1u)", widest: "var(--tracking-widest__e3grur1v)" }, weight: { light: "var(--weight-light__e3grur1w)", regular: "var(--weight-regular__e3grur1x)", medium: "var(--weight-medium__e3grur1y)", semibold: "var(--weight-semibold__e3grur1z)", bold: "var(--weight-bold__e3grur20)" }, dur: { fast: "var(--dur-fast__e3grur21)", base: "var(--dur-base__e3grur22)", slow: "var(--dur-slow__e3grur23)" }, ease: { ink: "var(--ease-ink__e3grur24)" }, shadow: { sm: "var(--shadow-sm__e3grur25)", md: "var(--shadow-md__e3grur26)", lg: "var(--shadow-lg__e3grur27)" }, color: colorVars };
|
|
7
7
|
|
|
8
8
|
// src/hooks/use-previous/index.ts
|
|
9
9
|
import { useEffect, useRef } from "react";
|
|
@@ -437,11 +437,11 @@ function CheckIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
|
437
437
|
import { useMemo as useMemo8 } from "react";
|
|
438
438
|
|
|
439
439
|
// src/components/checkbox/use-styles.css.ts
|
|
440
|
-
var box = "use-
|
|
441
|
-
var boxChecked = "use-
|
|
442
|
-
var check = "use-
|
|
443
|
-
var disabled = "use-
|
|
444
|
-
var input = "
|
|
440
|
+
var box = "use-styles_box__9zoga91";
|
|
441
|
+
var boxChecked = "use-styles_boxChecked__9zoga92";
|
|
442
|
+
var check = "use-styles_check__9zoga93";
|
|
443
|
+
var disabled = "use-styles_disabled__9zoga94";
|
|
444
|
+
var input = "surfaces_srOnly__6hs0fg0";
|
|
445
445
|
var root6 = "use-styles_root__9zoga90";
|
|
446
446
|
|
|
447
447
|
// src/components/checkbox/use-styles.ts
|
|
@@ -493,11 +493,11 @@ function Checkbox({
|
|
|
493
493
|
import { useMemo as useMemo9 } from "react";
|
|
494
494
|
|
|
495
495
|
// src/components/radio/use-styles.css.ts
|
|
496
|
-
var circle = "use-
|
|
496
|
+
var circle = "use-styles_circle__vy61b42";
|
|
497
497
|
var disabled2 = "use-styles_disabled__vy61b41";
|
|
498
|
-
var dot2 = "use-
|
|
499
|
-
var input2 = "
|
|
500
|
-
var label2 = "use-
|
|
498
|
+
var dot2 = "use-styles_dot__vy61b43";
|
|
499
|
+
var input2 = "surfaces_srOnly__6hs0fg0";
|
|
500
|
+
var label2 = "use-styles_label__vy61b44";
|
|
501
501
|
var root7 = "use-styles_root__vy61b40";
|
|
502
502
|
|
|
503
503
|
// src/components/radio/use-styles.ts
|
|
@@ -545,13 +545,13 @@ function Radio({ checked, onChange, label: label7, name, value, disabled: disabl
|
|
|
545
545
|
import { useMemo as useMemo10 } from "react";
|
|
546
546
|
|
|
547
547
|
// src/components/switch/use-styles.css.ts
|
|
548
|
-
var input3 = "
|
|
549
|
-
var knob = "use-
|
|
550
|
-
var knobChecked = "use-
|
|
551
|
-
var label3 = "use-
|
|
548
|
+
var input3 = "surfaces_srOnly__6hs0fg0";
|
|
549
|
+
var knob = "use-styles_knob__1r6kem73";
|
|
550
|
+
var knobChecked = "use-styles_knobChecked__1r6kem74";
|
|
551
|
+
var label3 = "use-styles_label__1r6kem75";
|
|
552
552
|
var root8 = "use-styles_root__1r6kem70";
|
|
553
|
-
var track2 = "use-
|
|
554
|
-
var trackChecked = "use-
|
|
553
|
+
var track2 = "use-styles_track__1r6kem71";
|
|
554
|
+
var trackChecked = "use-styles_trackChecked__1r6kem72";
|
|
555
555
|
|
|
556
556
|
// src/components/switch/use-styles.ts
|
|
557
557
|
function useStyles9({ checked }) {
|
|
@@ -1009,7 +1009,7 @@ import { cloneElement, useId as useId2, useState as useState4 } from "react";
|
|
|
1009
1009
|
import { useMemo as useMemo15 } from "react";
|
|
1010
1010
|
|
|
1011
1011
|
// src/components/tooltip/use-styles.css.ts
|
|
1012
|
-
var bubble = "use-styles_bubble__h9kvh1";
|
|
1012
|
+
var bubble = "use-styles_bubble__h9kvh1 surfaces_inkySurface__6hs0fg2";
|
|
1013
1013
|
var placement = { top: "use-styles_placement_top__h9kvh2", bottom: "use-styles_placement_bottom__h9kvh3" };
|
|
1014
1014
|
var wrapper = "use-styles_wrapper__h9kvh0";
|
|
1015
1015
|
|
|
@@ -1076,7 +1076,7 @@ import { useMemo as useMemo16 } from "react";
|
|
|
1076
1076
|
var chevron = "use-styles_chevron__1w1czpb4";
|
|
1077
1077
|
var chevronOpen = "use-styles_chevronOpen__1w1czpb5";
|
|
1078
1078
|
var label4 = "use-styles_label__1w1czpb1";
|
|
1079
|
-
var menu = "use-styles_menu__1w1czpb6";
|
|
1079
|
+
var menu = "use-styles_menu__1w1czpb6 surfaces_panelSurface__6hs0fg1";
|
|
1080
1080
|
var option = "use-styles_option__1w1czpb7";
|
|
1081
1081
|
var optionActive = "use-styles_optionActive__1w1czpb9";
|
|
1082
1082
|
var optionSelected = "use-styles_optionSelected__1w1czpb8";
|
|
@@ -1643,7 +1643,7 @@ import { useMemo as useMemo23 } from "react";
|
|
|
1643
1643
|
// src/components/menu/use-styles.css.ts
|
|
1644
1644
|
var danger = "use-styles_danger__1uyxaj3";
|
|
1645
1645
|
var item2 = "use-styles_item__1uyxaj2";
|
|
1646
|
-
var list = "use-styles_list__1uyxaj1";
|
|
1646
|
+
var list = "use-styles_list__1uyxaj1 surfaces_panelSurface__6hs0fg1";
|
|
1647
1647
|
var wrapper3 = "use-styles_wrapper__1uyxaj0";
|
|
1648
1648
|
|
|
1649
1649
|
// src/components/menu/use-styles.ts
|
|
@@ -1892,7 +1892,7 @@ import { useMemo as useMemo25 } from "react";
|
|
|
1892
1892
|
// src/components/snackbar/use-styles.css.ts
|
|
1893
1893
|
var closeBtn = "use-styles_closeBtn__ihzsep2";
|
|
1894
1894
|
var message = "use-styles_message__ihzsep1";
|
|
1895
|
-
var root20 = "use-styles_root__ihzsep0";
|
|
1895
|
+
var root20 = "use-styles_root__ihzsep0 surfaces_inkySurface__6hs0fg2";
|
|
1896
1896
|
|
|
1897
1897
|
// src/components/snackbar/use-styles.ts
|
|
1898
1898
|
function useStyles24() {
|