@jablonowski/dsb-tokens 1.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 (15) hide show
  1. package/config.js +62 -0
  2. package/dist/css/variables.css +137 -0
  3. package/dist/js/tokens.js +142 -0
  4. package/dist/json/tokens.json +181 -0
  5. package/dist/scss/_variables.scss +134 -0
  6. package/dist/ts/tokens.d.ts +135 -0
  7. package/dist/ts/tokens.ts +142 -0
  8. package/package.json +25 -0
  9. package/tokens/border.json +18 -0
  10. package/tokens/breakpoint.json +10 -0
  11. package/tokens/color.json +100 -0
  12. package/tokens/elevation.json +11 -0
  13. package/tokens/spacing.json +14 -0
  14. package/tokens/typography.json +38 -0
  15. package/tokens.md +150 -0
package/config.js ADDED
@@ -0,0 +1,62 @@
1
+ module.exports = {
2
+ "source": ["tokens/**/*.json"],
3
+ "platforms": {
4
+ "css": {
5
+ "prefix": "ds",
6
+ "transformGroup": "css",
7
+ "buildPath": "dist/css/",
8
+ "files": [
9
+ {
10
+ "destination": "variables.css",
11
+ "format": "css/variables",
12
+ "options": { "outputReferences": true },
13
+ },
14
+ ],
15
+ },
16
+ "scss": {
17
+ "transformGroup": "scss",
18
+ "buildPath": "dist/scss/",
19
+ "files": [
20
+ {
21
+ "destination": "_variables.scss",
22
+ "format": "scss/variables",
23
+ "options": { "outputReferences": true },
24
+ },
25
+ ],
26
+ },
27
+ "js": {
28
+ "transformGroup": "js",
29
+ "buildPath": "dist/js/",
30
+ "files": [
31
+ {
32
+ "destination": "tokens.js",
33
+ "format": "javascript/es6",
34
+ },
35
+ ],
36
+ },
37
+ "ts": {
38
+ "transformGroup": "js",
39
+ "buildPath": "dist/ts/",
40
+ "files": [
41
+ {
42
+ "destination": "tokens.ts",
43
+ "format": "javascript/es6",
44
+ },
45
+ {
46
+ "destination": "tokens.d.ts",
47
+ "format": "typescript/es6-declarations",
48
+ },
49
+ ],
50
+ },
51
+ "json": {
52
+ "transformGroup": "js",
53
+ "buildPath": "dist/json/",
54
+ "files": [
55
+ {
56
+ "destination": "tokens.json",
57
+ "format": "json/nested",
58
+ },
59
+ ],
60
+ },
61
+ },
62
+ }
package/dist/css/variables.css ADDED
@@ -0,0 +1,137 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ :root {
6
+ --ds-border-width-none: 0;
7
+ --ds-border-width-thin: 1px;
8
+ --ds-border-width-medium: 2px;
9
+ --ds-border-width-thick: 4px;
10
+ --ds-border-radius-none: 0;
11
+ --ds-border-radius-sm: 0.25rem;
12
+ --ds-border-radius-md: 0.5rem;
13
+ --ds-border-radius-lg: 1rem;
14
+ --ds-border-radius-xl: 1.5rem;
15
+ --ds-border-radius-full: 9999px;
16
+ --ds-breakpoint-xs: 0;
17
+ --ds-breakpoint-sm: 576px;
18
+ --ds-breakpoint-md: 768px;
19
+ --ds-breakpoint-lg: 992px;
20
+ --ds-breakpoint-xl: 1200px;
21
+ --ds-breakpoint-2xl: 1400px;
22
+ --ds-color-primary-50: #e8f5e9;
23
+ --ds-color-primary-100: #c8e6c9;
24
+ --ds-color-primary-200: #a5d6a7;
25
+ --ds-color-primary-300: #81c784;
26
+ --ds-color-primary-400: #66bb6a;
27
+ --ds-color-primary-500: #4caf50;
28
+ --ds-color-primary-600: #43a047;
29
+ --ds-color-primary-700: #388e3c;
30
+ --ds-color-primary-800: #2e7d32;
31
+ --ds-color-primary-900: #1b5e20;
32
+ --ds-color-primary-contrast-50: rgba(0, 0, 0, 0.87);
33
+ --ds-color-primary-contrast-100: rgba(0, 0, 0, 0.87);
34
+ --ds-color-primary-contrast-200: rgba(0, 0, 0, 0.87);
35
+ --ds-color-primary-contrast-300: rgba(0, 0, 0, 0.87);
36
+ --ds-color-primary-contrast-400: rgba(0, 0, 0, 0.87);
37
+ --ds-color-primary-contrast-500: #ffffff;
38
+ --ds-color-primary-contrast-600: #ffffff;
39
+ --ds-color-primary-contrast-700: #ffffff;
40
+ --ds-color-primary-contrast-800: #ffffff;
41
+ --ds-color-primary-contrast-900: #ffffff;
42
+ --ds-color-secondary-50: #eae7f6;
43
+ --ds-color-secondary-100: #c5bfe8;
44
+ --ds-color-secondary-200: #9f96d9;
45
+ --ds-color-secondary-300: #7a6ecb;
46
+ --ds-color-secondary-400: #6050c0;
47
+ --ds-color-secondary-500: #525199;
48
+ --ds-color-secondary-600: #49488a;
49
+ --ds-color-secondary-700: #3e3d75;
50
+ --ds-color-secondary-800: #333261;
51
+ --ds-color-secondary-900: #23213f;
52
+ --ds-color-secondary-contrast-50: rgba(0, 0, 0, 0.87);
53
+ --ds-color-secondary-contrast-100: rgba(0, 0, 0, 0.87);
54
+ --ds-color-secondary-contrast-200: rgba(0, 0, 0, 0.87);
55
+ --ds-color-secondary-contrast-300: rgba(0, 0, 0, 0.87);
56
+ --ds-color-secondary-contrast-400: #ffffff;
57
+ --ds-color-secondary-contrast-500: #ffffff;
58
+ --ds-color-secondary-contrast-600: #ffffff;
59
+ --ds-color-secondary-contrast-700: #ffffff;
60
+ --ds-color-secondary-contrast-800: #ffffff;
61
+ --ds-color-secondary-contrast-900: #ffffff;
62
+ --ds-color-neutral-0: #ffffff;
63
+ --ds-color-neutral-50: #f5f5f5;
64
+ --ds-color-neutral-100: #eeeeee;
65
+ --ds-color-neutral-200: #e0e0e0;
66
+ --ds-color-neutral-300: #bdbdbd;
67
+ --ds-color-neutral-400: #9e9e9e;
68
+ --ds-color-neutral-500: #757575;
69
+ --ds-color-neutral-600: #616161;
70
+ --ds-color-neutral-700: #424242;
71
+ --ds-color-neutral-800: #303030;
72
+ --ds-color-neutral-900: #1a1a1a;
73
+ --ds-color-success-light: #e8f5e9;
74
+ --ds-color-success-main: #4caf50;
75
+ --ds-color-success-dark: #1b5e20;
76
+ --ds-color-warning-light: #fff8e1;
77
+ --ds-color-warning-main: #ff9800;
78
+ --ds-color-warning-dark: #e65100;
79
+ --ds-color-error-light: #ffebee;
80
+ --ds-color-error-main: #d32f2f;
81
+ --ds-color-error-dark: #b71c1c;
82
+ --ds-color-info-light: #e3f2fd;
83
+ --ds-color-info-main: #1976d2;
84
+ --ds-color-info-dark: #0d47a1;
85
+ --ds-color-background-primary: #ffffff;
86
+ --ds-color-background-secondary: #f5f5f5;
87
+ --ds-color-background-dark: #2D2926;
88
+ --ds-color-text-primary: #1a1a1a;
89
+ --ds-color-text-secondary: #616161;
90
+ --ds-color-text-disabled: #9e9e9e;
91
+ --ds-color-text-inverse: #ffffff;
92
+ --ds-elevation-none: none;
93
+ --ds-elevation-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
94
+ --ds-elevation-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.06);
95
+ --ds-elevation-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
96
+ --ds-elevation-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.06);
97
+ --ds-elevation-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.06);
98
+ --ds-elevation-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.2);
99
+ --ds-spacing-none: 0;
100
+ --ds-spacing-2xs: 0.125rem;
101
+ --ds-spacing-xs: 0.25rem;
102
+ --ds-spacing-sm: 0.5rem;
103
+ --ds-spacing-md: 1rem;
104
+ --ds-spacing-lg: 1.5rem;
105
+ --ds-spacing-xl: 2rem;
106
+ --ds-spacing-2xl: 3rem;
107
+ --ds-spacing-3xl: 4rem;
108
+ --ds-spacing-4xl: 6rem;
109
+ --ds-font-family-base: 'ING Me', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
110
+ --ds-font-family-heading: 'ING Me', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
111
+ --ds-font-family-monospace: 'SF Mono', 'Fira Code', 'Courier New', monospace;
112
+ --ds-font-size-xs: 0.75rem;
113
+ --ds-font-size-sm: 0.875rem;
114
+ --ds-font-size-base: 1rem;
115
+ --ds-font-size-md: 1.125rem;
116
+ --ds-font-size-lg: 1.25rem;
117
+ --ds-font-size-xl: 1.5rem;
118
+ --ds-font-size-2xl: 1.875rem;
119
+ --ds-font-size-3xl: 2.25rem;
120
+ --ds-font-size-4xl: 3rem;
121
+ --ds-font-weight-light: 300;
122
+ --ds-font-weight-regular: 400;
123
+ --ds-font-weight-medium: 500;
124
+ --ds-font-weight-semibold: 600;
125
+ --ds-font-weight-bold: 700;
126
+ --ds-font-line-height-tight: 1.25;
127
+ --ds-font-line-height-base: 1.5;
128
+ --ds-font-line-height-loose: 1.75;
129
+ --ds-font-letter-spacing-tight: -0.025em;
130
+ --ds-font-letter-spacing-normal: 0em;
131
+ --ds-font-letter-spacing-wide: 0.025em;
132
+ --ds-font-letter-spacing-wider: 0.05em;
133
+ --ds-color-primary-base: var(--ds-color-primary-500);
134
+ --ds-color-primary-light: var(--ds-color-primary-300);
135
+ --ds-color-primary-dark: var(--ds-color-primary-700);
136
+ --ds-color-success-base: var(--ds-color-success-main);
137
+ }
package/dist/js/tokens.js ADDED
@@ -0,0 +1,142 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ export const BorderWidthNone = "0";
6
+ export const BorderWidthThin = "1px";
7
+ export const BorderWidthMedium = "2px";
8
+ export const BorderWidthThick = "4px";
9
+ export const BorderRadiusNone = "0";
10
+ export const BorderRadiusSm = "0.25rem";
11
+ export const BorderRadiusMd = "0.5rem";
12
+ export const BorderRadiusLg = "1rem";
13
+ export const BorderRadiusXl = "1.5rem";
14
+ export const BorderRadiusFull = "9999px";
15
+ export const BreakpointXs = "0";
16
+ export const BreakpointSm = "576px";
17
+ export const BreakpointMd = "768px";
18
+ export const BreakpointLg = "992px";
19
+ export const BreakpointXl = "1200px";
20
+ export const Breakpoint2xl = "1400px";
21
+ export const ColorPrimary50 = "#e8f5e9";
22
+ export const ColorPrimary100 = "#c8e6c9";
23
+ export const ColorPrimary200 = "#a5d6a7";
24
+ export const ColorPrimary300 = "#81c784";
25
+ export const ColorPrimary400 = "#66bb6a";
26
+ export const ColorPrimary500 = "#4caf50";
27
+ export const ColorPrimary600 = "#43a047";
28
+ export const ColorPrimary700 = "#388e3c";
29
+ export const ColorPrimary800 = "#2e7d32";
30
+ export const ColorPrimary900 = "#1b5e20";
31
+ export const ColorPrimaryBase = "#4caf50";
32
+ export const ColorPrimaryLight = "#81c784";
33
+ export const ColorPrimaryDark = "#388e3c";
34
+ export const ColorPrimaryContrast50 = "rgba(0, 0, 0, 0.87)";
35
+ export const ColorPrimaryContrast100 = "rgba(0, 0, 0, 0.87)";
36
+ export const ColorPrimaryContrast200 = "rgba(0, 0, 0, 0.87)";
37
+ export const ColorPrimaryContrast300 = "rgba(0, 0, 0, 0.87)";
38
+ export const ColorPrimaryContrast400 = "rgba(0, 0, 0, 0.87)";
39
+ export const ColorPrimaryContrast500 = "#ffffff";
40
+ export const ColorPrimaryContrast600 = "#ffffff";
41
+ export const ColorPrimaryContrast700 = "#ffffff";
42
+ export const ColorPrimaryContrast800 = "#ffffff";
43
+ export const ColorPrimaryContrast900 = "#ffffff";
44
+ export const ColorSecondary50 = "#eae7f6";
45
+ export const ColorSecondary100 = "#c5bfe8";
46
+ export const ColorSecondary200 = "#9f96d9";
47
+ export const ColorSecondary300 = "#7a6ecb";
48
+ export const ColorSecondary400 = "#6050c0";
49
+ export const ColorSecondary500 = "#525199";
50
+ export const ColorSecondary600 = "#49488a";
51
+ export const ColorSecondary700 = "#3e3d75";
52
+ export const ColorSecondary800 = "#333261";
53
+ export const ColorSecondary900 = "#23213f";
54
+ export const ColorSecondaryContrast50 = "rgba(0, 0, 0, 0.87)";
55
+ export const ColorSecondaryContrast100 = "rgba(0, 0, 0, 0.87)";
56
+ export const ColorSecondaryContrast200 = "rgba(0, 0, 0, 0.87)";
57
+ export const ColorSecondaryContrast300 = "rgba(0, 0, 0, 0.87)";
58
+ export const ColorSecondaryContrast400 = "#ffffff";
59
+ export const ColorSecondaryContrast500 = "#ffffff";
60
+ export const ColorSecondaryContrast600 = "#ffffff";
61
+ export const ColorSecondaryContrast700 = "#ffffff";
62
+ export const ColorSecondaryContrast800 = "#ffffff";
63
+ export const ColorSecondaryContrast900 = "#ffffff";
64
+ export const ColorNeutral0 = "#ffffff";
65
+ export const ColorNeutral50 = "#f5f5f5";
66
+ export const ColorNeutral100 = "#eeeeee";
67
+ export const ColorNeutral200 = "#e0e0e0";
68
+ export const ColorNeutral300 = "#bdbdbd";
69
+ export const ColorNeutral400 = "#9e9e9e";
70
+ export const ColorNeutral500 = "#757575";
71
+ export const ColorNeutral600 = "#616161";
72
+ export const ColorNeutral700 = "#424242";
73
+ export const ColorNeutral800 = "#303030";
74
+ export const ColorNeutral900 = "#1a1a1a";
75
+ export const ColorSuccessLight = "#e8f5e9";
76
+ export const ColorSuccessMain = "#4caf50";
77
+ export const ColorSuccessDark = "#1b5e20";
78
+ export const ColorSuccessBase = "#4caf50";
79
+ export const ColorWarningLight = "#fff8e1";
80
+ export const ColorWarningMain = "#ff9800";
81
+ export const ColorWarningDark = "#e65100";
82
+ export const ColorErrorLight = "#ffebee";
83
+ export const ColorErrorMain = "#d32f2f";
84
+ export const ColorErrorDark = "#b71c1c";
85
+ export const ColorInfoLight = "#e3f2fd";
86
+ export const ColorInfoMain = "#1976d2";
87
+ export const ColorInfoDark = "#0d47a1";
88
+ export const ColorBackgroundPrimary = "#ffffff";
89
+ export const ColorBackgroundSecondary = "#f5f5f5";
90
+ export const ColorBackgroundDark = "#2D2926";
91
+ export const ColorTextPrimary = "#1a1a1a";
92
+ export const ColorTextSecondary = "#616161";
93
+ export const ColorTextDisabled = "#9e9e9e";
94
+ export const ColorTextInverse = "#ffffff";
95
+ export const ElevationNone = "none";
96
+ export const ElevationXs = "0 1px 2px 0 rgba(0, 0, 0, 0.05)";
97
+ export const ElevationSm =
98
+ "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.06)";
99
+ export const ElevationMd =
100
+ "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06)";
101
+ export const ElevationLg =
102
+ "0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.06)";
103
+ export const ElevationXl =
104
+ "0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.06)";
105
+ export const Elevation2xl = "0 25px 50px -12px rgba(0, 0, 0, 0.2)";
106
+ export const SpacingNone = "0";
107
+ export const Spacing2xs = "0.125rem";
108
+ export const SpacingXs = "0.25rem";
109
+ export const SpacingSm = "0.5rem";
110
+ export const SpacingMd = "1rem";
111
+ export const SpacingLg = "1.5rem";
112
+ export const SpacingXl = "2rem";
113
+ export const Spacing2xl = "3rem";
114
+ export const Spacing3xl = "4rem";
115
+ export const Spacing4xl = "6rem";
116
+ export const FontFamilyBase =
117
+ "'ING Me', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif";
118
+ export const FontFamilyHeading =
119
+ "'ING Me', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif";
120
+ export const FontFamilyMonospace =
121
+ "'SF Mono', 'Fira Code', 'Courier New', monospace";
122
+ export const FontSizeXs = "0.75rem";
123
+ export const FontSizeSm = "0.875rem";
124
+ export const FontSizeBase = "1rem";
125
+ export const FontSizeMd = "1.125rem";
126
+ export const FontSizeLg = "1.25rem";
127
+ export const FontSizeXl = "1.5rem";
128
+ export const FontSize2xl = "1.875rem";
129
+ export const FontSize3xl = "2.25rem";
130
+ export const FontSize4xl = "3rem";
131
+ export const FontWeightLight = "300";
132
+ export const FontWeightRegular = "400";
133
+ export const FontWeightMedium = "500";
134
+ export const FontWeightSemibold = "600";
135
+ export const FontWeightBold = "700";
136
+ export const FontLineHeightTight = "1.25";
137
+ export const FontLineHeightBase = "1.5";
138
+ export const FontLineHeightLoose = "1.75";
139
+ export const FontLetterSpacingTight = "-0.025em";
140
+ export const FontLetterSpacingNormal = "0em";
141
+ export const FontLetterSpacingWide = "0.025em";
142
+ export const FontLetterSpacingWider = "0.05em";
package/dist/json/tokens.json ADDED
@@ -0,0 +1,181 @@
1
+ {
2
+ "border": {
3
+ "width": {
4
+ "none": "0",
5
+ "thin": "1px",
6
+ "medium": "2px",
7
+ "thick": "4px"
8
+ },
9
+ "radius": {
10
+ "none": "0",
11
+ "sm": "0.25rem",
12
+ "md": "0.5rem",
13
+ "lg": "1rem",
14
+ "xl": "1.5rem",
15
+ "full": "9999px"
16
+ }
17
+ },
18
+ "breakpoint": {
19
+ "xs": "0",
20
+ "sm": "576px",
21
+ "md": "768px",
22
+ "lg": "992px",
23
+ "xl": "1200px",
24
+ "2xl": "1400px"
25
+ },
26
+ "color": {
27
+ "primary": {
28
+ "50": "#e8f5e9",
29
+ "100": "#c8e6c9",
30
+ "200": "#a5d6a7",
31
+ "300": "#81c784",
32
+ "400": "#66bb6a",
33
+ "500": "#4caf50",
34
+ "600": "#43a047",
35
+ "700": "#388e3c",
36
+ "800": "#2e7d32",
37
+ "900": "#1b5e20",
38
+ "base": "#4caf50",
39
+ "light": "#81c784",
40
+ "dark": "#388e3c",
41
+ "contrast": {
42
+ "50": "rgba(0, 0, 0, 0.87)",
43
+ "100": "rgba(0, 0, 0, 0.87)",
44
+ "200": "rgba(0, 0, 0, 0.87)",
45
+ "300": "rgba(0, 0, 0, 0.87)",
46
+ "400": "rgba(0, 0, 0, 0.87)",
47
+ "500": "#ffffff",
48
+ "600": "#ffffff",
49
+ "700": "#ffffff",
50
+ "800": "#ffffff",
51
+ "900": "#ffffff"
52
+ }
53
+ },
54
+ "secondary": {
55
+ "50": "#eae7f6",
56
+ "100": "#c5bfe8",
57
+ "200": "#9f96d9",
58
+ "300": "#7a6ecb",
59
+ "400": "#6050c0",
60
+ "500": "#525199",
61
+ "600": "#49488a",
62
+ "700": "#3e3d75",
63
+ "800": "#333261",
64
+ "900": "#23213f",
65
+ "contrast": {
66
+ "50": "rgba(0, 0, 0, 0.87)",
67
+ "100": "rgba(0, 0, 0, 0.87)",
68
+ "200": "rgba(0, 0, 0, 0.87)",
69
+ "300": "rgba(0, 0, 0, 0.87)",
70
+ "400": "#ffffff",
71
+ "500": "#ffffff",
72
+ "600": "#ffffff",
73
+ "700": "#ffffff",
74
+ "800": "#ffffff",
75
+ "900": "#ffffff"
76
+ }
77
+ },
78
+ "neutral": {
79
+ "0": "#ffffff",
80
+ "50": "#f5f5f5",
81
+ "100": "#eeeeee",
82
+ "200": "#e0e0e0",
83
+ "300": "#bdbdbd",
84
+ "400": "#9e9e9e",
85
+ "500": "#757575",
86
+ "600": "#616161",
87
+ "700": "#424242",
88
+ "800": "#303030",
89
+ "900": "#1a1a1a"
90
+ },
91
+ "success": {
92
+ "light": "#e8f5e9",
93
+ "main": "#4caf50",
94
+ "dark": "#1b5e20",
95
+ "base": "#4caf50"
96
+ },
97
+ "warning": {
98
+ "light": "#fff8e1",
99
+ "main": "#ff9800",
100
+ "dark": "#e65100"
101
+ },
102
+ "error": {
103
+ "light": "#ffebee",
104
+ "main": "#d32f2f",
105
+ "dark": "#b71c1c"
106
+ },
107
+ "info": {
108
+ "light": "#e3f2fd",
109
+ "main": "#1976d2",
110
+ "dark": "#0d47a1"
111
+ },
112
+ "background": {
113
+ "primary": "#ffffff",
114
+ "secondary": "#f5f5f5",
115
+ "dark": "#2D2926"
116
+ },
117
+ "text": {
118
+ "primary": "#1a1a1a",
119
+ "secondary": "#616161",
120
+ "disabled": "#9e9e9e",
121
+ "inverse": "#ffffff"
122
+ }
123
+ },
124
+ "elevation": {
125
+ "none": "none",
126
+ "xs": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
127
+ "sm": "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.06)",
128
+ "md": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06)",
129
+ "lg": "0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.06)",
130
+ "xl": "0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.06)",
131
+ "2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.2)"
132
+ },
133
+ "spacing": {
134
+ "none": "0",
135
+ "2xs": "0.125rem",
136
+ "xs": "0.25rem",
137
+ "sm": "0.5rem",
138
+ "md": "1rem",
139
+ "lg": "1.5rem",
140
+ "xl": "2rem",
141
+ "2xl": "3rem",
142
+ "3xl": "4rem",
143
+ "4xl": "6rem"
144
+ },
145
+ "font": {
146
+ "family": {
147
+ "base": "'ING Me', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
148
+ "heading": "'ING Me', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
149
+ "monospace": "'SF Mono', 'Fira Code', 'Courier New', monospace"
150
+ },
151
+ "size": {
152
+ "xs": "0.75rem",
153
+ "sm": "0.875rem",
154
+ "base": "1rem",
155
+ "md": "1.125rem",
156
+ "lg": "1.25rem",
157
+ "xl": "1.5rem",
158
+ "2xl": "1.875rem",
159
+ "3xl": "2.25rem",
160
+ "4xl": "3rem"
161
+ },
162
+ "weight": {
163
+ "light": "300",
164
+ "regular": "400",
165
+ "medium": "500",
166
+ "semibold": "600",
167
+ "bold": "700"
168
+ },
169
+ "lineHeight": {
170
+ "tight": "1.25",
171
+ "base": "1.5",
172
+ "loose": "1.75"
173
+ },
174
+ "letterSpacing": {
175
+ "tight": "-0.025em",
176
+ "normal": "0em",
177
+ "wide": "0.025em",
178
+ "wider": "0.05em"
179
+ }
180
+ }
181
+ }
package/dist/scss/_variables.scss ADDED
@@ -0,0 +1,134 @@
1
+
2
+ // Do not edit directly, this file was auto-generated.
3
+
4
+ $border-width-none: 0;
5
+ $border-width-thin: 1px;
6
+ $border-width-medium: 2px;
7
+ $border-width-thick: 4px;
8
+ $border-radius-none: 0;
9
+ $border-radius-sm: 0.25rem;
10
+ $border-radius-md: 0.5rem;
11
+ $border-radius-lg: 1rem;
12
+ $border-radius-xl: 1.5rem;
13
+ $border-radius-full: 9999px;
14
+ $breakpoint-xs: 0;
15
+ $breakpoint-sm: 576px;
16
+ $breakpoint-md: 768px;
17
+ $breakpoint-lg: 992px;
18
+ $breakpoint-xl: 1200px;
19
+ $breakpoint-2xl: 1400px;
20
+ $color-primary-50: #e8f5e9;
21
+ $color-primary-100: #c8e6c9;
22
+ $color-primary-200: #a5d6a7;
23
+ $color-primary-300: #81c784;
24
+ $color-primary-400: #66bb6a;
25
+ $color-primary-500: #4caf50;
26
+ $color-primary-600: #43a047;
27
+ $color-primary-700: #388e3c;
28
+ $color-primary-800: #2e7d32;
29
+ $color-primary-900: #1b5e20;
30
+ $color-primary-contrast-50: rgba(0, 0, 0, 0.87);
31
+ $color-primary-contrast-100: rgba(0, 0, 0, 0.87);
32
+ $color-primary-contrast-200: rgba(0, 0, 0, 0.87);
33
+ $color-primary-contrast-300: rgba(0, 0, 0, 0.87);
34
+ $color-primary-contrast-400: rgba(0, 0, 0, 0.87);
35
+ $color-primary-contrast-500: #ffffff;
36
+ $color-primary-contrast-600: #ffffff;
37
+ $color-primary-contrast-700: #ffffff;
38
+ $color-primary-contrast-800: #ffffff;
39
+ $color-primary-contrast-900: #ffffff;
40
+ $color-secondary-50: #eae7f6;
41
+ $color-secondary-100: #c5bfe8;
42
+ $color-secondary-200: #9f96d9;
43
+ $color-secondary-300: #7a6ecb;
44
+ $color-secondary-400: #6050c0;
45
+ $color-secondary-500: #525199;
46
+ $color-secondary-600: #49488a;
47
+ $color-secondary-700: #3e3d75;
48
+ $color-secondary-800: #333261;
49
+ $color-secondary-900: #23213f;
50
+ $color-secondary-contrast-50: rgba(0, 0, 0, 0.87);
51
+ $color-secondary-contrast-100: rgba(0, 0, 0, 0.87);
52
+ $color-secondary-contrast-200: rgba(0, 0, 0, 0.87);
53
+ $color-secondary-contrast-300: rgba(0, 0, 0, 0.87);
54
+ $color-secondary-contrast-400: #ffffff;
55
+ $color-secondary-contrast-500: #ffffff;
56
+ $color-secondary-contrast-600: #ffffff;
57
+ $color-secondary-contrast-700: #ffffff;
58
+ $color-secondary-contrast-800: #ffffff;
59
+ $color-secondary-contrast-900: #ffffff;
60
+ $color-neutral-0: #ffffff;
61
+ $color-neutral-50: #f5f5f5;
62
+ $color-neutral-100: #eeeeee;
63
+ $color-neutral-200: #e0e0e0;
64
+ $color-neutral-300: #bdbdbd;
65
+ $color-neutral-400: #9e9e9e;
66
+ $color-neutral-500: #757575;
67
+ $color-neutral-600: #616161;
68
+ $color-neutral-700: #424242;
69
+ $color-neutral-800: #303030;
70
+ $color-neutral-900: #1a1a1a;
71
+ $color-success-light: #e8f5e9;
72
+ $color-success-main: #4caf50;
73
+ $color-success-dark: #1b5e20;
74
+ $color-warning-light: #fff8e1;
75
+ $color-warning-main: #ff9800;
76
+ $color-warning-dark: #e65100;
77
+ $color-error-light: #ffebee;
78
+ $color-error-main: #d32f2f;
79
+ $color-error-dark: #b71c1c;
80
+ $color-info-light: #e3f2fd;
81
+ $color-info-main: #1976d2;
82
+ $color-info-dark: #0d47a1;
83
+ $color-background-primary: #ffffff;
84
+ $color-background-secondary: #f5f5f5;
85
+ $color-background-dark: #2D2926;
86
+ $color-text-primary: #1a1a1a;
87
+ $color-text-secondary: #616161;
88
+ $color-text-disabled: #9e9e9e;
89
+ $color-text-inverse: #ffffff;
90
+ $elevation-none: none;
91
+ $elevation-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
92
+ $elevation-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.06);
93
+ $elevation-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
94
+ $elevation-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.06);
95
+ $elevation-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.06);
96
+ $elevation-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.2);
97
+ $spacing-none: 0;
98
+ $spacing-2xs: 0.125rem;
99
+ $spacing-xs: 0.25rem;
100
+ $spacing-sm: 0.5rem;
101
+ $spacing-md: 1rem;
102
+ $spacing-lg: 1.5rem;
103
+ $spacing-xl: 2rem;
104
+ $spacing-2xl: 3rem;
105
+ $spacing-3xl: 4rem;
106
+ $spacing-4xl: 6rem;
107
+ $font-family-base: 'ING Me', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
108
+ $font-family-heading: 'ING Me', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
109
+ $font-family-monospace: 'SF Mono', 'Fira Code', 'Courier New', monospace;
110
+ $font-size-xs: 0.75rem;
111
+ $font-size-sm: 0.875rem;
112
+ $font-size-base: 1rem;
113
+ $font-size-md: 1.125rem;
114
+ $font-size-lg: 1.25rem;
115
+ $font-size-xl: 1.5rem;
116
+ $font-size-2xl: 1.875rem;
117
+ $font-size-3xl: 2.25rem;
118
+ $font-size-4xl: 3rem;
119
+ $font-weight-light: 300;
120
+ $font-weight-regular: 400;
121
+ $font-weight-medium: 500;
122
+ $font-weight-semibold: 600;
123
+ $font-weight-bold: 700;
124
+ $font-line-height-tight: 1.25;
125
+ $font-line-height-base: 1.5;
126
+ $font-line-height-loose: 1.75;
127
+ $font-letter-spacing-tight: -0.025em;
128
+ $font-letter-spacing-normal: 0em;
129
+ $font-letter-spacing-wide: 0.025em;
130
+ $font-letter-spacing-wider: 0.05em;
131
+ $color-primary-base: $color-primary-500;
132
+ $color-primary-light: $color-primary-300;
133
+ $color-primary-dark: $color-primary-700;
134
+ $color-success-base: $color-success-main;
package/dist/ts/tokens.d.ts ADDED
@@ -0,0 +1,135 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ export const BorderWidthNone: string;
6
+ export const BorderWidthThin: string;
7
+ export const BorderWidthMedium: string;
8
+ export const BorderWidthThick: string;
9
+ export const BorderRadiusNone: string;
10
+ export const BorderRadiusSm: string;
11
+ export const BorderRadiusMd: string;
12
+ export const BorderRadiusLg: string;
13
+ export const BorderRadiusXl: string;
14
+ export const BorderRadiusFull: string;
15
+ export const BreakpointXs: string;
16
+ export const BreakpointSm: string;
17
+ export const BreakpointMd: string;
18
+ export const BreakpointLg: string;
19
+ export const BreakpointXl: string;
20
+ export const Breakpoint2xl: string;
21
+ export const ColorPrimary50: string;
22
+ export const ColorPrimary100: string;
23
+ export const ColorPrimary200: string;
24
+ export const ColorPrimary300: string;
25
+ export const ColorPrimary400: string;
26
+ export const ColorPrimary500: string;
27
+ export const ColorPrimary600: string;
28
+ export const ColorPrimary700: string;
29
+ export const ColorPrimary800: string;
30
+ export const ColorPrimary900: string;
31
+ export const ColorPrimaryBase: string;
32
+ export const ColorPrimaryLight: string;
33
+ export const ColorPrimaryDark: string;
34
+ export const ColorPrimaryContrast50: string;
35
+ export const ColorPrimaryContrast100: string;
36
+ export const ColorPrimaryContrast200: string;
37
+ export const ColorPrimaryContrast300: string;
38
+ export const ColorPrimaryContrast400: string;
39
+ export const ColorPrimaryContrast500: string;
40
+ export const ColorPrimaryContrast600: string;
41
+ export const ColorPrimaryContrast700: string;
42
+ export const ColorPrimaryContrast800: string;
43
+ export const ColorPrimaryContrast900: string;
44
+ export const ColorSecondary50: string;
45
+ export const ColorSecondary100: string;
46
+ export const ColorSecondary200: string;
47
+ export const ColorSecondary300: string;
48
+ export const ColorSecondary400: string;
49
+ export const ColorSecondary500: string;
50
+ export const ColorSecondary600: string;
51
+ export const ColorSecondary700: string;
52
+ export const ColorSecondary800: string;
53
+ export const ColorSecondary900: string;
54
+ export const ColorSecondaryContrast50: string;
55
+ export const ColorSecondaryContrast100: string;
56
+ export const ColorSecondaryContrast200: string;
57
+ export const ColorSecondaryContrast300: string;
58
+ export const ColorSecondaryContrast400: string;
59
+ export const ColorSecondaryContrast500: string;
60
+ export const ColorSecondaryContrast600: string;
61
+ export const ColorSecondaryContrast700: string;
62
+ export const ColorSecondaryContrast800: string;
63
+ export const ColorSecondaryContrast900: string;
64
+ export const ColorNeutral0: string;
65
+ export const ColorNeutral50: string;
66
+ export const ColorNeutral100: string;
67
+ export const ColorNeutral200: string;
68
+ export const ColorNeutral300: string;
69
+ export const ColorNeutral400: string;
70
+ export const ColorNeutral500: string;
71
+ export const ColorNeutral600: string;
72
+ export const ColorNeutral700: string;
73
+ export const ColorNeutral800: string;
74
+ export const ColorNeutral900: string;
75
+ export const ColorSuccessLight: string;
76
+ export const ColorSuccessMain: string;
77
+ export const ColorSuccessDark: string;
78
+ export const ColorSuccessBase: string;
79
+ export const ColorWarningLight: string;
80
+ export const ColorWarningMain: string;
81
+ export const ColorWarningDark: string;
82
+ export const ColorErrorLight: string;
83
+ export const ColorErrorMain: string;
84
+ export const ColorErrorDark: string;
85
+ export const ColorInfoLight: string;
86
+ export const ColorInfoMain: string;
87
+ export const ColorInfoDark: string;
88
+ export const ColorBackgroundPrimary: string;
89
+ export const ColorBackgroundSecondary: string;
90
+ export const ColorBackgroundDark: string;
91
+ export const ColorTextPrimary: string;
92
+ export const ColorTextSecondary: string;
93
+ export const ColorTextDisabled: string;
94
+ export const ColorTextInverse: string;
95
+ export const ElevationNone: string;
96
+ export const ElevationXs: string;
97
+ export const ElevationSm: string;
98
+ export const ElevationMd: string;
99
+ export const ElevationLg: string;
100
+ export const ElevationXl: string;
101
+ export const Elevation2xl: string;
102
+ export const SpacingNone: string;
103
+ export const Spacing2xs: string;
104
+ export const SpacingXs: string;
105
+ export const SpacingSm: string;
106
+ export const SpacingMd: string;
107
+ export const SpacingLg: string;
108
+ export const SpacingXl: string;
109
+ export const Spacing2xl: string;
110
+ export const Spacing3xl: string;
111
+ export const Spacing4xl: string;
112
+ export const FontFamilyBase: string;
113
+ export const FontFamilyHeading: string;
114
+ export const FontFamilyMonospace: string;
115
+ export const FontSizeXs: string;
116
+ export const FontSizeSm: string;
117
+ export const FontSizeBase: string;
118
+ export const FontSizeMd: string;
119
+ export const FontSizeLg: string;
120
+ export const FontSizeXl: string;
121
+ export const FontSize2xl: string;
122
+ export const FontSize3xl: string;
123
+ export const FontSize4xl: string;
124
+ export const FontWeightLight: string;
125
+ export const FontWeightRegular: string;
126
+ export const FontWeightMedium: string;
127
+ export const FontWeightSemibold: string;
128
+ export const FontWeightBold: string;
129
+ export const FontLineHeightTight: string;
130
+ export const FontLineHeightBase: string;
131
+ export const FontLineHeightLoose: string;
132
+ export const FontLetterSpacingTight: string;
133
+ export const FontLetterSpacingNormal: string;
134
+ export const FontLetterSpacingWide: string;
135
+ export const FontLetterSpacingWider: string;
package/dist/ts/tokens.ts ADDED
@@ -0,0 +1,142 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ export const BorderWidthNone = "0";
6
+ export const BorderWidthThin = "1px";
7
+ export const BorderWidthMedium = "2px";
8
+ export const BorderWidthThick = "4px";
9
+ export const BorderRadiusNone = "0";
10
+ export const BorderRadiusSm = "0.25rem";
11
+ export const BorderRadiusMd = "0.5rem";
12
+ export const BorderRadiusLg = "1rem";
13
+ export const BorderRadiusXl = "1.5rem";
14
+ export const BorderRadiusFull = "9999px";
15
+ export const BreakpointXs = "0";
16
+ export const BreakpointSm = "576px";
17
+ export const BreakpointMd = "768px";
18
+ export const BreakpointLg = "992px";
19
+ export const BreakpointXl = "1200px";
20
+ export const Breakpoint2xl = "1400px";
21
+ export const ColorPrimary50 = "#e8f5e9";
22
+ export const ColorPrimary100 = "#c8e6c9";
23
+ export const ColorPrimary200 = "#a5d6a7";
24
+ export const ColorPrimary300 = "#81c784";
25
+ export const ColorPrimary400 = "#66bb6a";
26
+ export const ColorPrimary500 = "#4caf50";
27
+ export const ColorPrimary600 = "#43a047";
28
+ export const ColorPrimary700 = "#388e3c";
29
+ export const ColorPrimary800 = "#2e7d32";
30
+ export const ColorPrimary900 = "#1b5e20";
31
+ export const ColorPrimaryBase = "#4caf50";
32
+ export const ColorPrimaryLight = "#81c784";
33
+ export const ColorPrimaryDark = "#388e3c";
34
+ export const ColorPrimaryContrast50 = "rgba(0, 0, 0, 0.87)";
35
+ export const ColorPrimaryContrast100 = "rgba(0, 0, 0, 0.87)";
36
+ export const ColorPrimaryContrast200 = "rgba(0, 0, 0, 0.87)";
37
+ export const ColorPrimaryContrast300 = "rgba(0, 0, 0, 0.87)";
38
+ export const ColorPrimaryContrast400 = "rgba(0, 0, 0, 0.87)";
39
+ export const ColorPrimaryContrast500 = "#ffffff";
40
+ export const ColorPrimaryContrast600 = "#ffffff";
41
+ export const ColorPrimaryContrast700 = "#ffffff";
42
+ export const ColorPrimaryContrast800 = "#ffffff";
43
+ export const ColorPrimaryContrast900 = "#ffffff";
44
+ export const ColorSecondary50 = "#eae7f6";
45
+ export const ColorSecondary100 = "#c5bfe8";
46
+ export const ColorSecondary200 = "#9f96d9";
47
+ export const ColorSecondary300 = "#7a6ecb";
48
+ export const ColorSecondary400 = "#6050c0";
49
+ export const ColorSecondary500 = "#525199";
50
+ export const ColorSecondary600 = "#49488a";
51
+ export const ColorSecondary700 = "#3e3d75";
52
+ export const ColorSecondary800 = "#333261";
53
+ export const ColorSecondary900 = "#23213f";
54
+ export const ColorSecondaryContrast50 = "rgba(0, 0, 0, 0.87)";
55
+ export const ColorSecondaryContrast100 = "rgba(0, 0, 0, 0.87)";
56
+ export const ColorSecondaryContrast200 = "rgba(0, 0, 0, 0.87)";
57
+ export const ColorSecondaryContrast300 = "rgba(0, 0, 0, 0.87)";
58
+ export const ColorSecondaryContrast400 = "#ffffff";
59
+ export const ColorSecondaryContrast500 = "#ffffff";
60
+ export const ColorSecondaryContrast600 = "#ffffff";
61
+ export const ColorSecondaryContrast700 = "#ffffff";
62
+ export const ColorSecondaryContrast800 = "#ffffff";
63
+ export const ColorSecondaryContrast900 = "#ffffff";
64
+ export const ColorNeutral0 = "#ffffff";
65
+ export const ColorNeutral50 = "#f5f5f5";
66
+ export const ColorNeutral100 = "#eeeeee";
67
+ export const ColorNeutral200 = "#e0e0e0";
68
+ export const ColorNeutral300 = "#bdbdbd";
69
+ export const ColorNeutral400 = "#9e9e9e";
70
+ export const ColorNeutral500 = "#757575";
71
+ export const ColorNeutral600 = "#616161";
72
+ export const ColorNeutral700 = "#424242";
73
+ export const ColorNeutral800 = "#303030";
74
+ export const ColorNeutral900 = "#1a1a1a";
75
+ export const ColorSuccessLight = "#e8f5e9";
76
+ export const ColorSuccessMain = "#4caf50";
77
+ export const ColorSuccessDark = "#1b5e20";
78
+ export const ColorSuccessBase = "#4caf50";
79
+ export const ColorWarningLight = "#fff8e1";
80
+ export const ColorWarningMain = "#ff9800";
81
+ export const ColorWarningDark = "#e65100";
82
+ export const ColorErrorLight = "#ffebee";
83
+ export const ColorErrorMain = "#d32f2f";
84
+ export const ColorErrorDark = "#b71c1c";
85
+ export const ColorInfoLight = "#e3f2fd";
86
+ export const ColorInfoMain = "#1976d2";
87
+ export const ColorInfoDark = "#0d47a1";
88
+ export const ColorBackgroundPrimary = "#ffffff";
89
+ export const ColorBackgroundSecondary = "#f5f5f5";
90
+ export const ColorBackgroundDark = "#2D2926";
91
+ export const ColorTextPrimary = "#1a1a1a";
92
+ export const ColorTextSecondary = "#616161";
93
+ export const ColorTextDisabled = "#9e9e9e";
94
+ export const ColorTextInverse = "#ffffff";
95
+ export const ElevationNone = "none";
96
+ export const ElevationXs = "0 1px 2px 0 rgba(0, 0, 0, 0.05)";
97
+ export const ElevationSm =
98
+ "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.06)";
99
+ export const ElevationMd =
100
+ "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06)";
101
+ export const ElevationLg =
102
+ "0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.06)";
103
+ export const ElevationXl =
104
+ "0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.06)";
105
+ export const Elevation2xl = "0 25px 50px -12px rgba(0, 0, 0, 0.2)";
106
+ export const SpacingNone = "0";
107
+ export const Spacing2xs = "0.125rem";
108
+ export const SpacingXs = "0.25rem";
109
+ export const SpacingSm = "0.5rem";
110
+ export const SpacingMd = "1rem";
111
+ export const SpacingLg = "1.5rem";
112
+ export const SpacingXl = "2rem";
113
+ export const Spacing2xl = "3rem";
114
+ export const Spacing3xl = "4rem";
115
+ export const Spacing4xl = "6rem";
116
+ export const FontFamilyBase =
117
+ "'ING Me', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif";
118
+ export const FontFamilyHeading =
119
+ "'ING Me', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif";
120
+ export const FontFamilyMonospace =
121
+ "'SF Mono', 'Fira Code', 'Courier New', monospace";
122
+ export const FontSizeXs = "0.75rem";
123
+ export const FontSizeSm = "0.875rem";
124
+ export const FontSizeBase = "1rem";
125
+ export const FontSizeMd = "1.125rem";
126
+ export const FontSizeLg = "1.25rem";
127
+ export const FontSizeXl = "1.5rem";
128
+ export const FontSize2xl = "1.875rem";
129
+ export const FontSize3xl = "2.25rem";
130
+ export const FontSize4xl = "3rem";
131
+ export const FontWeightLight = "300";
132
+ export const FontWeightRegular = "400";
133
+ export const FontWeightMedium = "500";
134
+ export const FontWeightSemibold = "600";
135
+ export const FontWeightBold = "700";
136
+ export const FontLineHeightTight = "1.25";
137
+ export const FontLineHeightBase = "1.5";
138
+ export const FontLineHeightLoose = "1.75";
139
+ export const FontLetterSpacingTight = "-0.025em";
140
+ export const FontLetterSpacingNormal = "0em";
141
+ export const FontLetterSpacingWide = "0.025em";
142
+ export const FontLetterSpacingWider = "0.05em";
package/package.json ADDED
@@ -0,0 +1,25 @@
1
+ {
2
+ "name": "@jablonowski/dsb-tokens",
3
+ "version": "1.0.1",
4
+ "description": "",
5
+ "license": "MIT",
6
+ "author": "Mateusz Jablonowski",
7
+ "type": "commonjs",
8
+ "main": "index.js",
9
+ "scripts": {
10
+ "build": "style-dictionary build --config config.js",
11
+ "release": "npm run build && npm version patch && npm publish --access public",
12
+ "test": "echo \"Error: no test specified\" && exit 1"
13
+ },
14
+ "repository": {
15
+ "type": "git",
16
+ "url": "https://github.com/jablonowski/design-system-blueprint.git",
17
+ "directory": "design-tokens"
18
+ },
19
+ "publishConfig": {
20
+ "access": "public"
21
+ },
22
+ "devDependencies": {
23
+ "style-dictionary": "^4.2.0"
24
+ }
25
+ }
package/tokens/border.json ADDED
@@ -0,0 +1,18 @@
1
+ {
2
+ "border": {
3
+ "width": {
4
+ "none": { "value": "0" },
5
+ "thin": { "value": "1px" },
6
+ "medium": { "value": "2px" },
7
+ "thick": { "value": "4px" }
8
+ },
9
+ "radius": {
10
+ "none": { "value": "0" },
11
+ "sm": { "value": "0.25rem" },
12
+ "md": { "value": "0.5rem" },
13
+ "lg": { "value": "1rem" },
14
+ "xl": { "value": "1.5rem" },
15
+ "full": { "value": "9999px" }
16
+ }
17
+ }
18
+ }
package/tokens/breakpoint.json ADDED
@@ -0,0 +1,10 @@
1
+ {
2
+ "breakpoint": {
3
+ "xs": { "value": "0" },
4
+ "sm": { "value": "576px" },
5
+ "md": { "value": "768px" },
6
+ "lg": { "value": "992px" },
7
+ "xl": { "value": "1200px" },
8
+ "2xl": { "value": "1400px" }
9
+ }
10
+ }
package/tokens/color.json ADDED
@@ -0,0 +1,100 @@
1
+ {
2
+ "color": {
3
+ "primary": {
4
+ "50": { "value": "#e8f5e9" },
5
+ "100": { "value": "#c8e6c9" },
6
+ "200": { "value": "#a5d6a7" },
7
+ "300": { "value": "#81c784" },
8
+ "400": { "value": "#66bb6a" },
9
+ "500": { "value": "#4caf50" },
10
+ "600": { "value": "#43a047" },
11
+ "700": { "value": "#388e3c" },
12
+ "800": { "value": "#2e7d32" },
13
+ "900": { "value": "#1b5e20" },
14
+ "base": { "value": "{color.primary.500}" },
15
+ "light": { "value": "{color.primary.300}" },
16
+ "dark": { "value": "{color.primary.700}" },
17
+ "contrast": {
18
+ "50": { "value": "rgba(0, 0, 0, 0.87)" },
19
+ "100": { "value": "rgba(0, 0, 0, 0.87)" },
20
+ "200": { "value": "rgba(0, 0, 0, 0.87)" },
21
+ "300": { "value": "rgba(0, 0, 0, 0.87)" },
22
+ "400": { "value": "rgba(0, 0, 0, 0.87)" },
23
+ "500": { "value": "#ffffff" },
24
+ "600": { "value": "#ffffff" },
25
+ "700": { "value": "#ffffff" },
26
+ "800": { "value": "#ffffff" },
27
+ "900": { "value": "#ffffff" }
28
+ }
29
+ },
30
+ "secondary": {
31
+ "50": { "value": "#eae7f6" },
32
+ "100": { "value": "#c5bfe8" },
33
+ "200": { "value": "#9f96d9" },
34
+ "300": { "value": "#7a6ecb" },
35
+ "400": { "value": "#6050c0" },
36
+ "500": { "value": "#525199" },
37
+ "600": { "value": "#49488a" },
38
+ "700": { "value": "#3e3d75" },
39
+ "800": { "value": "#333261" },
40
+ "900": { "value": "#23213f" },
41
+ "contrast": {
42
+ "50": { "value": "rgba(0, 0, 0, 0.87)" },
43
+ "100": { "value": "rgba(0, 0, 0, 0.87)" },
44
+ "200": { "value": "rgba(0, 0, 0, 0.87)" },
45
+ "300": { "value": "rgba(0, 0, 0, 0.87)" },
46
+ "400": { "value": "#ffffff" },
47
+ "500": { "value": "#ffffff" },
48
+ "600": { "value": "#ffffff" },
49
+ "700": { "value": "#ffffff" },
50
+ "800": { "value": "#ffffff" },
51
+ "900": { "value": "#ffffff" }
52
+ }
53
+ },
54
+ "neutral": {
55
+ "0": { "value": "#ffffff" },
56
+ "50": { "value": "#f5f5f5" },
57
+ "100": { "value": "#eeeeee" },
58
+ "200": { "value": "#e0e0e0" },
59
+ "300": { "value": "#bdbdbd" },
60
+ "400": { "value": "#9e9e9e" },
61
+ "500": { "value": "#757575" },
62
+ "600": { "value": "#616161" },
63
+ "700": { "value": "#424242" },
64
+ "800": { "value": "#303030" },
65
+ "900": { "value": "#1a1a1a" }
66
+ },
67
+ "success": {
68
+ "light": { "value": "#e8f5e9" },
69
+ "main": { "value": "#4caf50" },
70
+ "dark": { "value": "#1b5e20" },
71
+ "base": { "value": "{color.success.main}" }
72
+ },
73
+ "warning": {
74
+ "light": { "value": "#fff8e1" },
75
+ "main": { "value": "#ff9800" },
76
+ "dark": { "value": "#e65100" }
77
+ },
78
+ "error": {
79
+ "light": { "value": "#ffebee" },
80
+ "main": { "value": "#d32f2f" },
81
+ "dark": { "value": "#b71c1c" }
82
+ },
83
+ "info": {
84
+ "light": { "value": "#e3f2fd" },
85
+ "main": { "value": "#1976d2" },
86
+ "dark": { "value": "#0d47a1" }
87
+ },
88
+ "background": {
89
+ "primary": { "value": "#ffffff" },
90
+ "secondary": { "value": "#f5f5f5" },
91
+ "dark": { "value": "#2D2926" }
92
+ },
93
+ "text": {
94
+ "primary": { "value": "#1a1a1a" },
95
+ "secondary": { "value": "#616161" },
96
+ "disabled": { "value": "#9e9e9e" },
97
+ "inverse": { "value": "#ffffff" }
98
+ }
99
+ }
100
+ }
package/tokens/elevation.json ADDED
@@ -0,0 +1,11 @@
1
+ {
2
+ "elevation": {
3
+ "none": { "value": "none" },
4
+ "xs": { "value": "0 1px 2px 0 rgba(0, 0, 0, 0.05)" },
5
+ "sm": { "value": "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.06)" },
6
+ "md": { "value": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06)" },
7
+ "lg": { "value": "0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.06)" },
8
+ "xl": { "value": "0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.06)" },
9
+ "2xl": { "value": "0 25px 50px -12px rgba(0, 0, 0, 0.2)" }
10
+ }
11
+ }
package/tokens/spacing.json ADDED
@@ -0,0 +1,14 @@
1
+ {
2
+ "spacing": {
3
+ "none": { "value": "0" },
4
+ "2xs": { "value": "0.125rem" },
5
+ "xs": { "value": "0.25rem" },
6
+ "sm": { "value": "0.5rem" },
7
+ "md": { "value": "1rem" },
8
+ "lg": { "value": "1.5rem" },
9
+ "xl": { "value": "2rem" },
10
+ "2xl": { "value": "3rem" },
11
+ "3xl": { "value": "4rem" },
12
+ "4xl": { "value": "6rem" }
13
+ }
14
+ }
package/tokens/typography.json ADDED
@@ -0,0 +1,38 @@
1
+ {
2
+ "font": {
3
+ "family": {
4
+ "base": { "value": "'ING Me', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif" },
5
+ "heading": { "value": "'ING Me', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif" },
6
+ "monospace": { "value": "'SF Mono', 'Fira Code', 'Courier New', monospace" }
7
+ },
8
+ "size": {
9
+ "xs": { "value": "0.75rem" },
10
+ "sm": { "value": "0.875rem" },
11
+ "base": { "value": "1rem" },
12
+ "md": { "value": "1.125rem" },
13
+ "lg": { "value": "1.25rem" },
14
+ "xl": { "value": "1.5rem" },
15
+ "2xl": { "value": "1.875rem" },
16
+ "3xl": { "value": "2.25rem" },
17
+ "4xl": { "value": "3rem" }
18
+ },
19
+ "weight": {
20
+ "light": { "value": "300" },
21
+ "regular": { "value": "400" },
22
+ "medium": { "value": "500" },
23
+ "semibold": { "value": "600" },
24
+ "bold": { "value": "700" }
25
+ },
26
+ "lineHeight": {
27
+ "tight": { "value": "1.25" },
28
+ "base": { "value": "1.5" },
29
+ "loose": { "value": "1.75" }
30
+ },
31
+ "letterSpacing": {
32
+ "tight": { "value": "-0.025em" },
33
+ "normal": { "value": "0em" },
34
+ "wide": { "value": "0.025em" },
35
+ "wider": { "value": "0.05em" }
36
+ }
37
+ }
38
+ }
package/tokens.md ADDED
@@ -0,0 +1,150 @@
1
+ # Design Tokens — Component Implementation Reference
2
+
3
+ Extracted from actual component CSS. Use these as the basis for CSS custom properties in `styles.css`.
4
+
5
+ ---
6
+
7
+ ## Colors
8
+
9
+ ### Text
10
+
11
+ | Token | Value | Used for |
12
+ |---|---|---|
13
+ | `--color-text-primary` | `#111` | Body text, labels, headings |
14
+ | `--color-text-body` | `#333` | Modal body text, table cell text |
15
+ | `--color-text-secondary` | `#555` | Ghost button, accordion body, avatar initials |
16
+ | `--color-text-muted` | `#666` | Breadcrumb links, footer links, list description |
17
+ | `--color-text-subtle` | `#888` | Hints, table header, icon chevrons, footer tagline |
18
+ | `--color-text-placeholder` | `#aaa` | Input placeholder, table empty state, list meta, footer copyright |
19
+ | `--color-text-disabled` | `#999` | Disabled input/label text |
20
+ | `--color-text-inverse` | `#fff` | Text on dark/primary backgrounds |
21
+
22
+ ### Surfaces & Backgrounds
23
+
24
+ | Token | Value | Used for |
25
+ |---|---|---|
26
+ | `--color-surface` | `#fff` | All control backgrounds (inputs, dropdowns, cards) |
27
+ | `--color-surface-subtle` | `#fafafa` | Table header bg, striped rows |
28
+ | `--color-surface-hover` | `#f5f5f5` | Button/nav hover, disabled input bg |
29
+ | `--color-surface-hover-2` | `#f7f7f7` | Table row hover |
30
+ | `--color-surface-selected` | `#f0f0f0` | Dropdown selected option, modal close hover |
31
+ | `--color-surface-avatar` | `#e8e8e8` | Avatar initials background |
32
+
33
+ ### Borders & Dividers
34
+
35
+ | Token | Value | Used for |
36
+ |---|---|---|
37
+ | `--color-border-control` | `#d4d4d4` | Input, checkbox, radio, dropdown borders |
38
+ | `--color-border-control-hover` | `#bbb` | Button secondary border hover |
39
+ | `--color-border-subtle` | `#ebebeb` | Header/footer borders, table outer border |
40
+ | `--color-border-hairline` | `#f0f0f0` | Table cell dividers, accordion, list dividers, footer bottom |
41
+ | `--color-border-separator` | `#c0c0c0` | Breadcrumbs chevron separator |
42
+
43
+ ### Semantic — Error / Danger
44
+
45
+ | Token | Value | Used for |
46
+ |---|---|---|
47
+ | `--color-error` | `#d93025` | Error border, error text, error checkbox fill |
48
+ | `--color-error-hover` | `#b0261e` | Dropdown error border hover |
49
+ | `--color-error-bg` | `#fce8e6` | Tag danger background |
50
+ | `--color-error-text` | `#c5221f` | Tag danger text, list error dot/label |
51
+ | `--color-error-border-soft` | `#f0a9a4` | Button danger default border |
52
+ | `--color-error-surface` | `#fef2f2` | Button danger hover background |
53
+
54
+ ### Semantic — Success
55
+
56
+ | Token | Value | Used for |
57
+ |---|---|---|
58
+ | `--color-success` | `#1a7f3c` | Tag success text, list success dot/label |
59
+ | `--color-success-bg` | `#e6f4ea` | Tag success background |
60
+
61
+ ### Semantic — Warning
62
+
63
+ | Token | Value | Used for |
64
+ |---|---|---|
65
+ | `--color-warning` | `#92600a` | Tag warning text, list warning dot/label |
66
+ | `--color-warning-bg` | `#fef3cd` | Tag warning background |
67
+
68
+ ### Semantic — Info
69
+
70
+ | Token | Value | Used for |
71
+ |---|---|---|
72
+ | `--color-info` | `#1a56db` | Tag info text, list info dot/label |
73
+ | `--color-info-bg` | `#e8f0fe` | Tag info background |
74
+
75
+ ### Overlays & Shadows
76
+
77
+ | Token | Value | Used for |
78
+ |---|---|---|
79
+ | `--color-backdrop` | `rgba(0, 0, 0, 0.4)` | Modal backdrop |
80
+ | `--shadow-focus` | `0 0 0 3px rgba(0, 0, 0, 0.06)` | Input focus ring shadow |
81
+ | `--shadow-focus-error` | `0 0 0 3px rgba(217, 48, 37, 0.1)` | Error input focus ring shadow |
82
+ | `--shadow-dropdown` | `0 4px 12px rgba(0, 0, 0, 0.08)` | Dropdown menu |
83
+ | `--shadow-modal` | `0 8px 32px rgba(0, 0, 0, 0.14)` | Modal panel |
84
+
85
+ ---
86
+
87
+ ## Typography
88
+
89
+ ### Font Sizes
90
+
91
+ | Token | Value | Used for |
92
+ |---|---|---|
93
+ | `--font-size-2xs` | `11px` | Tag sm, list meta, table column headers |
94
+ | `--font-size-xs` | `12px` | Tag md, hint/error text, footer secondary text |
95
+ | `--font-size-sm` | `13px` | Labels, breadcrumbs, footer links, list description |
96
+ | `--font-size-md` | `14px` | Default body, most controls (input md, button md) |
97
+ | `--font-size-lg` | `15px` | Button lg, input lg, brand name |
98
+ | `--font-size-xl` | `16px` | Modal title |
99
+
100
+ ### Font Weights
101
+
102
+ | Token | Value | Used for |
103
+ |---|---|---|
104
+ | `--font-weight-medium` | `500` | Labels, button text, list labels, active nav |
105
+ | `--font-weight-semibold` | `600` | Brand names, modal title, table headers, footer column headings |
106
+
107
+ ---
108
+
109
+ ## Borders
110
+
111
+ ### Widths
112
+
113
+ | Token | Value | Used for |
114
+ |---|---|---|
115
+ | `--border-width-hairline` | `1px` | Dividers (header, footer, table cells, list, accordion) |
116
+ | `--border-width-control` | `1.5px` | All interactive controls (inputs, checkbox, radio, dropdown, button) |
117
+ | `--border-width-focus` | `2px` | Focus ring outline |
118
+
119
+ ### Radii
120
+
121
+ | Token | Value | Used for |
122
+ |---|---|---|
123
+ | `--radius-xs` | `3px` | Breadcrumb links, footer links, accordion focus |
124
+ | `--radius-sm` | `4px` | Checkbox, tag, logo areas, dropdown option |
125
+ | `--radius-md` | `5px` | Header nav link, modal close button |
126
+ | `--radius-lg` | `6px` | Button, input, dropdown trigger/menu, header CTA, avatar-rounded |
127
+ | `--radius-xl` | `8px` | Table wrapper, bordered list |
128
+ | `--radius-2xl` | `10px` | Modal panel |
129
+ | `--radius-full` | `50%` | Avatar circle, radio button, indicator dots |
130
+
131
+ ---
132
+
133
+ ## Motion
134
+
135
+ | Token | Value | Used for |
136
+ |---|---|---|
137
+ | `--duration-fast` | `0.1s` | Subtle hovers (dropdown option bg, table row bg) |
138
+ | `--duration-base` | `0.12s` | Standard transitions across all components |
139
+ | `--duration-slow` | `0.2s` | Accordion expand/collapse |
140
+ | `--easing-base` | `ease` | Used everywhere |
141
+
142
+ ---
143
+
144
+ ## Misc
145
+
146
+ | Token | Value | Used for |
147
+ |---|---|---|
148
+ | `--opacity-disabled` | `0.42` | Disabled state across all components |
149
+ | `--z-index-dropdown` | `100` | Dropdown menu |
150
+ | `--z-index-modal` | `1000` | Modal backdrop |