@transparentcage/tokens 0.0.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.
Files changed (5) hide show
  1. package/dist/css/variables.css +87 -0
  2. package/dist/css/variables.dark.css +87 -0
  3. package/dist/json/tokens.json +87 -0
  4. package/dist/ts/tokens.ts +91 -0
  5. package/package.json +32 -0
package/dist/css/variables.css ADDED
@@ -0,0 +1,87 @@
1
+ :root {
2
+ --border-width-0: 0;
3
+ --border-width-1: 1px;
4
+ --border-width-2: 2px;
5
+ --color-palette-blue-50: #eff6ff;
6
+ --color-palette-blue-100: #dbeafe;
7
+ --color-palette-blue-200: #bfdbfe;
8
+ --color-palette-blue-300: #93c5fd;
9
+ --color-palette-blue-400: #60a5fa;
10
+ --color-palette-blue-500: #3b82f6;
11
+ --color-palette-blue-600: #2563eb;
12
+ --color-palette-blue-700: #1d4ed8;
13
+ --color-palette-blue-800: #1e40af;
14
+ --color-palette-blue-900: #1e3a8a;
15
+ --color-palette-neutral-50: #fafafa;
16
+ --color-palette-neutral-100: #f5f5f5;
17
+ --color-palette-neutral-200: #e5e5e5;
18
+ --color-palette-neutral-300: #d4d4d4;
19
+ --color-palette-neutral-400: #a3a3a3;
20
+ --color-palette-neutral-500: #737373;
21
+ --color-palette-neutral-600: #525252;
22
+ --color-palette-neutral-700: #404040;
23
+ --color-palette-neutral-800: #262626;
24
+ --color-palette-neutral-900: #171717;
25
+ --color-bg-surface: #fafafa;
26
+ --color-bg-surface-alt: #f5f5f5;
27
+ --color-bg-overlay: rgba(0,0,0,0.5);
28
+ --color-text-primary: #171717;
29
+ --color-text-secondary: #525252;
30
+ --color-text-muted: #737373;
31
+ --color-text-inverse: #fafafa;
32
+ --color-border-default: #e5e5e5;
33
+ --color-border-strong: #d4d4d4;
34
+ --color-border-muted: #f5f5f5;
35
+ --color-status-error: #dc2626;
36
+ --color-status-success: #16a34a;
37
+ --color-status-warning: #ca8a04;
38
+ --motion-duration-fast: 150ms;
39
+ --motion-duration-normal: 250ms;
40
+ --motion-duration-slow: 350ms;
41
+ --motion-easing-default: ease;
42
+ --motion-easing-in-out: ease-in-out;
43
+ --radius-none: 0;
44
+ --radius-sm: 0.25rem;
45
+ --radius-md: 0.375rem;
46
+ --radius-lg: 0.5rem;
47
+ --radius-xl: 0.75rem;
48
+ --radius-full: 9999px;
49
+ --shadow-none: none;
50
+ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
51
+ --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
52
+ --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
53
+ --space-0: 0;
54
+ --space-1: 0.25rem;
55
+ --space-2: 0.5rem;
56
+ --space-3: 0.75rem;
57
+ --space-4: 1rem;
58
+ --space-5: 1.25rem;
59
+ --space-6: 1.5rem;
60
+ --space-8: 2rem;
61
+ --space-10: 2.5rem;
62
+ --space-12: 3rem;
63
+ --typography-font-family-sans: system-ui, -apple-system, sans-serif;
64
+ --typography-font-family-mono: ui-monospace, monospace;
65
+ --typography-font-size-xs: 0.75rem;
66
+ --typography-font-size-sm: 0.875rem;
67
+ --typography-font-size-md: 1rem;
68
+ --typography-font-size-lg: 1.125rem;
69
+ --typography-font-size-xl: 1.25rem;
70
+ --typography-font-size-2xl: 1.5rem;
71
+ --typography-font-weight-normal: 400;
72
+ --typography-font-weight-medium: 500;
73
+ --typography-font-weight-semibold: 600;
74
+ --typography-font-weight-bold: 700;
75
+ --typography-line-height-tight: 1.25;
76
+ --typography-line-height-normal: 1.5;
77
+ --typography-line-height-relaxed: 1.75;
78
+ --z-index-base: 0;
79
+ --z-index-dropdown: 1000;
80
+ --z-index-sticky: 1100;
81
+ --z-index-overlay: 1200;
82
+ --z-index-modal: 1300;
83
+ --z-index-toast: 1400;
84
+ --color-brand-primary: var(--color-palette-blue-600);
85
+ --color-brand-primary-hover: var(--color-palette-blue-700);
86
+ --color-brand-primary-muted: var(--color-palette-blue-100);
87
+ }
package/dist/css/variables.dark.css ADDED
@@ -0,0 +1,87 @@
1
+ [data-theme="dark"] {
2
+ --border-width-0: 0;
3
+ --border-width-1: 1px;
4
+ --border-width-2: 2px;
5
+ --color-palette-blue-50: #eff6ff;
6
+ --color-palette-blue-100: #dbeafe;
7
+ --color-palette-blue-200: #bfdbfe;
8
+ --color-palette-blue-300: #93c5fd;
9
+ --color-palette-blue-400: #60a5fa;
10
+ --color-palette-blue-500: #3b82f6;
11
+ --color-palette-blue-600: #2563eb;
12
+ --color-palette-blue-700: #1d4ed8;
13
+ --color-palette-blue-800: #1e40af;
14
+ --color-palette-blue-900: #1e3a8a;
15
+ --color-palette-neutral-50: #fafafa;
16
+ --color-palette-neutral-100: #f5f5f5;
17
+ --color-palette-neutral-200: #e5e5e5;
18
+ --color-palette-neutral-300: #d4d4d4;
19
+ --color-palette-neutral-400: #a3a3a3;
20
+ --color-palette-neutral-500: #737373;
21
+ --color-palette-neutral-600: #525252;
22
+ --color-palette-neutral-700: #404040;
23
+ --color-palette-neutral-800: #262626;
24
+ --color-palette-neutral-900: #171717;
25
+ --color-bg-surface: #171717;
26
+ --color-bg-surface-alt: #262626;
27
+ --color-bg-overlay: rgba(0,0,0,0.7);
28
+ --color-text-primary: #fafafa;
29
+ --color-text-secondary: #a3a3a3;
30
+ --color-text-muted: #737373;
31
+ --color-text-inverse: #171717;
32
+ --color-border-default: #404040;
33
+ --color-border-strong: #525252;
34
+ --color-border-muted: #262626;
35
+ --color-status-error: #dc2626;
36
+ --color-status-success: #16a34a;
37
+ --color-status-warning: #ca8a04;
38
+ --motion-duration-fast: 150ms;
39
+ --motion-duration-normal: 250ms;
40
+ --motion-duration-slow: 350ms;
41
+ --motion-easing-default: ease;
42
+ --motion-easing-in-out: ease-in-out;
43
+ --radius-none: 0;
44
+ --radius-sm: 0.25rem;
45
+ --radius-md: 0.375rem;
46
+ --radius-lg: 0.5rem;
47
+ --radius-xl: 0.75rem;
48
+ --radius-full: 9999px;
49
+ --shadow-none: none;
50
+ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
51
+ --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
52
+ --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
53
+ --space-0: 0;
54
+ --space-1: 0.25rem;
55
+ --space-2: 0.5rem;
56
+ --space-3: 0.75rem;
57
+ --space-4: 1rem;
58
+ --space-5: 1.25rem;
59
+ --space-6: 1.5rem;
60
+ --space-8: 2rem;
61
+ --space-10: 2.5rem;
62
+ --space-12: 3rem;
63
+ --typography-font-family-sans: system-ui, -apple-system, sans-serif;
64
+ --typography-font-family-mono: ui-monospace, monospace;
65
+ --typography-font-size-xs: 0.75rem;
66
+ --typography-font-size-sm: 0.875rem;
67
+ --typography-font-size-md: 1rem;
68
+ --typography-font-size-lg: 1.125rem;
69
+ --typography-font-size-xl: 1.25rem;
70
+ --typography-font-size-2xl: 1.5rem;
71
+ --typography-font-weight-normal: 400;
72
+ --typography-font-weight-medium: 500;
73
+ --typography-font-weight-semibold: 600;
74
+ --typography-font-weight-bold: 700;
75
+ --typography-line-height-tight: 1.25;
76
+ --typography-line-height-normal: 1.5;
77
+ --typography-line-height-relaxed: 1.75;
78
+ --z-index-base: 0;
79
+ --z-index-dropdown: 1000;
80
+ --z-index-sticky: 1100;
81
+ --z-index-overlay: 1200;
82
+ --z-index-modal: 1300;
83
+ --z-index-toast: 1400;
84
+ --color-brand-primary: var(--color-palette-blue-600);
85
+ --color-brand-primary-hover: var(--color-palette-blue-700);
86
+ --color-brand-primary-muted: var(--color-palette-blue-100);
87
+ }
package/dist/json/tokens.json ADDED
@@ -0,0 +1,87 @@
1
+ {
2
+ "BorderWidth0": "0",
3
+ "BorderWidth1": "1px",
4
+ "BorderWidth2": "2px",
5
+ "ColorPaletteBlue50": "#eff6ff",
6
+ "ColorPaletteBlue100": "#dbeafe",
7
+ "ColorPaletteBlue200": "#bfdbfe",
8
+ "ColorPaletteBlue300": "#93c5fd",
9
+ "ColorPaletteBlue400": "#60a5fa",
10
+ "ColorPaletteBlue500": "#3b82f6",
11
+ "ColorPaletteBlue600": "#2563eb",
12
+ "ColorPaletteBlue700": "#1d4ed8",
13
+ "ColorPaletteBlue800": "#1e40af",
14
+ "ColorPaletteBlue900": "#1e3a8a",
15
+ "ColorPaletteNeutral50": "#fafafa",
16
+ "ColorPaletteNeutral100": "#f5f5f5",
17
+ "ColorPaletteNeutral200": "#e5e5e5",
18
+ "ColorPaletteNeutral300": "#d4d4d4",
19
+ "ColorPaletteNeutral400": "#a3a3a3",
20
+ "ColorPaletteNeutral500": "#737373",
21
+ "ColorPaletteNeutral600": "#525252",
22
+ "ColorPaletteNeutral700": "#404040",
23
+ "ColorPaletteNeutral800": "#262626",
24
+ "ColorPaletteNeutral900": "#171717",
25
+ "ColorBgSurface": "#fafafa",
26
+ "ColorBgSurfaceAlt": "#f5f5f5",
27
+ "ColorBgOverlay": "rgba(0,0,0,0.5)",
28
+ "ColorTextPrimary": "#171717",
29
+ "ColorTextSecondary": "#525252",
30
+ "ColorTextMuted": "#737373",
31
+ "ColorTextInverse": "#fafafa",
32
+ "ColorBorderDefault": "#e5e5e5",
33
+ "ColorBorderStrong": "#d4d4d4",
34
+ "ColorBorderMuted": "#f5f5f5",
35
+ "ColorBrandPrimary": "#2563eb",
36
+ "ColorBrandPrimaryHover": "#1d4ed8",
37
+ "ColorBrandPrimaryMuted": "#dbeafe",
38
+ "ColorStatusError": "#dc2626",
39
+ "ColorStatusSuccess": "#16a34a",
40
+ "ColorStatusWarning": "#ca8a04",
41
+ "MotionDurationFast": "150ms",
42
+ "MotionDurationNormal": "250ms",
43
+ "MotionDurationSlow": "350ms",
44
+ "MotionEasingDefault": "ease",
45
+ "MotionEasingInOut": "ease-in-out",
46
+ "RadiusNone": "0",
47
+ "RadiusSm": "0.25rem",
48
+ "RadiusMd": "0.375rem",
49
+ "RadiusLg": "0.5rem",
50
+ "RadiusXl": "0.75rem",
51
+ "RadiusFull": "9999px",
52
+ "ShadowNone": "none",
53
+ "ShadowSm": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
54
+ "ShadowMd": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
55
+ "ShadowLg": "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)",
56
+ "Space0": "0",
57
+ "Space1": "0.25rem",
58
+ "Space2": "0.5rem",
59
+ "Space3": "0.75rem",
60
+ "Space4": "1rem",
61
+ "Space5": "1.25rem",
62
+ "Space6": "1.5rem",
63
+ "Space8": "2rem",
64
+ "Space10": "2.5rem",
65
+ "Space12": "3rem",
66
+ "TypographyFontFamilySans": "system-ui, -apple-system, sans-serif",
67
+ "TypographyFontFamilyMono": "ui-monospace, monospace",
68
+ "TypographyFontSizeXs": "0.75rem",
69
+ "TypographyFontSizeSm": "0.875rem",
70
+ "TypographyFontSizeMd": "1rem",
71
+ "TypographyFontSizeLg": "1.125rem",
72
+ "TypographyFontSizeXl": "1.25rem",
73
+ "TypographyFontSize2xl": "1.5rem",
74
+ "TypographyFontWeightNormal": "400",
75
+ "TypographyFontWeightMedium": "500",
76
+ "TypographyFontWeightSemibold": "600",
77
+ "TypographyFontWeightBold": "700",
78
+ "TypographyLineHeightTight": "1.25",
79
+ "TypographyLineHeightNormal": "1.5",
80
+ "TypographyLineHeightRelaxed": "1.75",
81
+ "ZIndexBase": "0",
82
+ "ZIndexDropdown": "1000",
83
+ "ZIndexSticky": "1100",
84
+ "ZIndexOverlay": "1200",
85
+ "ZIndexModal": "1300",
86
+ "ZIndexToast": "1400"
87
+ }
package/dist/ts/tokens.ts ADDED
@@ -0,0 +1,91 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ export const BorderWidth0 = "0";
6
+ export const BorderWidth1 = "1px";
7
+ export const BorderWidth2 = "2px";
8
+ export const ColorPaletteBlue50 = "#eff6ff";
9
+ export const ColorPaletteBlue100 = "#dbeafe";
10
+ export const ColorPaletteBlue200 = "#bfdbfe";
11
+ export const ColorPaletteBlue300 = "#93c5fd";
12
+ export const ColorPaletteBlue400 = "#60a5fa";
13
+ export const ColorPaletteBlue500 = "#3b82f6";
14
+ export const ColorPaletteBlue600 = "#2563eb";
15
+ export const ColorPaletteBlue700 = "#1d4ed8";
16
+ export const ColorPaletteBlue800 = "#1e40af";
17
+ export const ColorPaletteBlue900 = "#1e3a8a";
18
+ export const ColorPaletteNeutral50 = "#fafafa";
19
+ export const ColorPaletteNeutral100 = "#f5f5f5";
20
+ export const ColorPaletteNeutral200 = "#e5e5e5";
21
+ export const ColorPaletteNeutral300 = "#d4d4d4";
22
+ export const ColorPaletteNeutral400 = "#a3a3a3";
23
+ export const ColorPaletteNeutral500 = "#737373";
24
+ export const ColorPaletteNeutral600 = "#525252";
25
+ export const ColorPaletteNeutral700 = "#404040";
26
+ export const ColorPaletteNeutral800 = "#262626";
27
+ export const ColorPaletteNeutral900 = "#171717";
28
+ export const ColorBgSurface = "#fafafa";
29
+ export const ColorBgSurfaceAlt = "#f5f5f5";
30
+ export const ColorBgOverlay = "rgba(0,0,0,0.5)";
31
+ export const ColorTextPrimary = "#171717";
32
+ export const ColorTextSecondary = "#525252";
33
+ export const ColorTextMuted = "#737373";
34
+ export const ColorTextInverse = "#fafafa";
35
+ export const ColorBorderDefault = "#e5e5e5";
36
+ export const ColorBorderStrong = "#d4d4d4";
37
+ export const ColorBorderMuted = "#f5f5f5";
38
+ export const ColorBrandPrimary = "#2563eb";
39
+ export const ColorBrandPrimaryHover = "#1d4ed8";
40
+ export const ColorBrandPrimaryMuted = "#dbeafe";
41
+ export const ColorStatusError = "#dc2626";
42
+ export const ColorStatusSuccess = "#16a34a";
43
+ export const ColorStatusWarning = "#ca8a04";
44
+ export const MotionDurationFast = "150ms";
45
+ export const MotionDurationNormal = "250ms";
46
+ export const MotionDurationSlow = "350ms";
47
+ export const MotionEasingDefault = "ease";
48
+ export const MotionEasingInOut = "ease-in-out";
49
+ export const RadiusNone = "0";
50
+ export const RadiusSm = "0.25rem";
51
+ export const RadiusMd = "0.375rem";
52
+ export const RadiusLg = "0.5rem";
53
+ export const RadiusXl = "0.75rem";
54
+ export const RadiusFull = "9999px";
55
+ export const ShadowNone = "none";
56
+ export const ShadowSm = "0 1px 2px 0 rgba(0, 0, 0, 0.05)";
57
+ export const ShadowMd =
58
+ "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)";
59
+ export const ShadowLg =
60
+ "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)";
61
+ export const Space0 = "0";
62
+ export const Space1 = "0.25rem";
63
+ export const Space2 = "0.5rem";
64
+ export const Space3 = "0.75rem";
65
+ export const Space4 = "1rem";
66
+ export const Space5 = "1.25rem";
67
+ export const Space6 = "1.5rem";
68
+ export const Space8 = "2rem";
69
+ export const Space10 = "2.5rem";
70
+ export const Space12 = "3rem";
71
+ export const TypographyFontFamilySans = "system-ui, -apple-system, sans-serif";
72
+ export const TypographyFontFamilyMono = "ui-monospace, monospace";
73
+ export const TypographyFontSizeXs = "0.75rem";
74
+ export const TypographyFontSizeSm = "0.875rem";
75
+ export const TypographyFontSizeMd = "1rem";
76
+ export const TypographyFontSizeLg = "1.125rem";
77
+ export const TypographyFontSizeXl = "1.25rem";
78
+ export const TypographyFontSize2xl = "1.5rem";
79
+ export const TypographyFontWeightNormal = "400";
80
+ export const TypographyFontWeightMedium = "500";
81
+ export const TypographyFontWeightSemibold = "600";
82
+ export const TypographyFontWeightBold = "700";
83
+ export const TypographyLineHeightTight = "1.25";
84
+ export const TypographyLineHeightNormal = "1.5";
85
+ export const TypographyLineHeightRelaxed = "1.75";
86
+ export const ZIndexBase = "0";
87
+ export const ZIndexDropdown = "1000";
88
+ export const ZIndexSticky = "1100";
89
+ export const ZIndexOverlay = "1200";
90
+ export const ZIndexModal = "1300";
91
+ export const ZIndexToast = "1400";
package/package.json ADDED
@@ -0,0 +1,32 @@
1
+ {
2
+ "name": "@transparentcage/tokens",
3
+ "version": "0.0.1",
4
+ "private": false,
5
+ "type": "module",
6
+ "exports": {
7
+ ".": {
8
+ "types": "./dist/ts/tokens.ts",
9
+ "import": "./dist/ts/tokens.ts",
10
+ "default": "./dist/ts/tokens.ts"
11
+ },
12
+ "./variables.css": "./dist/css/variables.css",
13
+ "./variables.dark.css": "./dist/css/variables.dark.css"
14
+ },
15
+ "main": "./dist/ts/tokens.ts",
16
+ "types": "./dist/ts/tokens.ts",
17
+ "files": [
18
+ "dist"
19
+ ],
20
+ "publishConfig": {
21
+ "access": "public"
22
+ },
23
+ "devDependencies": {
24
+ "style-dictionary": "^4.0.0"
25
+ },
26
+ "scripts": {
27
+ "build": "node style-dictionary/build.js",
28
+ "dev": "node style-dictionary/build.js --watch",
29
+ "lint": "eslint .",
30
+ "typecheck": "tsc --noEmit"
31
+ }
32
+ }