@dezkareid/design-tokens 0.0.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.
Files changed (7) hide show
  1. package/README.md +53 -0
  2. package/dist/css/variables.css +67 -0
  3. package/dist/js/tokens.d.ts +58 -0
  4. package/dist/js/tokens.js +58 -0
  5. package/dist/js/tokens.mjs +58 -0
  6. package/dist/scss/_variables.scss +54 -0
  7. package/package.json +46 -0
package/README.md ADDED
@@ -0,0 +1,53 @@
1
+ # @dezkareid/design-tokens
2
+
3
+ Design tokens for the dezkareid design system.
4
+
5
+ ## Installation
6
+
7
+ ```bash
8
+ pnpm add @dezkareid/design-tokens
9
+ ```
10
+
11
+ ## Usage
12
+
13
+ This package provides design tokens in multiple formats located in the `dist` folder.
14
+
15
+ ### CSS
16
+
17
+ Import the CSS variables into your stylesheet:
18
+
19
+ ```css
20
+ @import "@dezkareid/design-tokens/dist/css/variables.css";
21
+
22
+ .my-button {
23
+ background-color: var(--color-primary);
24
+ color: var(--color-text-primary);
25
+ padding: var(--spacing-16);
26
+ }
27
+ ```
28
+
29
+ ### SCSS
30
+
31
+ Import the SCSS variables into your Sass files:
32
+
33
+ ```scss
34
+ @import "@dezkareid/design-tokens/dist/scss/variables";
35
+
36
+ .my-button {
37
+ background-color: $color-base-blue-500;
38
+ padding: $spacing-16;
39
+ }
40
+ ```
41
+
42
+ ### JavaScript / TypeScript
43
+
44
+ Import tokens as constants:
45
+
46
+ ```javascript
47
+ import { LightColorPrimary, SpacingVal16 } from '@dezkareid/design-tokens';
48
+
49
+ const styles = {
50
+ backgroundColor: LightColorPrimary,
51
+ padding: SpacingVal16
52
+ };
53
+ ```
package/dist/css/variables.css ADDED
@@ -0,0 +1,67 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ :root {
6
+ color-scheme: light dark;
7
+ --color-base-blue-100: #dbeafe;
8
+ --color-base-blue-500: #3b82f6;
9
+ --color-base-blue-900: #1e3a8a;
10
+ --color-base-green-100: #dcfce7;
11
+ --color-base-green-500: #22c55e;
12
+ --color-base-green-900: #14532d;
13
+ --color-base-red-100: #fee2e2;
14
+ --color-base-red-500: #ef4444;
15
+ --color-base-red-900: #7f1d1d;
16
+ --color-base-gray-100: #f3f4f6;
17
+ --color-base-gray-500: #6b7280;
18
+ --color-base-gray-900: #111827;
19
+ --color-base-white: #ffffff;
20
+ --color-base-black: #000000;
21
+ --spacing-0: 0;
22
+ --spacing-4: 0.25rem;
23
+ --spacing-8: 0.5rem;
24
+ --spacing-12: 0.75rem;
25
+ --spacing-16: 1rem;
26
+ --spacing-24: 1.5rem;
27
+ --spacing-32: 2rem;
28
+ --spacing-48: 3rem;
29
+ --spacing-64: 4rem;
30
+ --font-family-base: 'IBM Plex Sans', sans-serif;
31
+ --font-family-mono: 'IBM Plex Mono', monospace;
32
+ --font-size-100: 0.75rem;
33
+ --font-size-200: 0.875rem;
34
+ --font-size-300: 1rem;
35
+ --font-size-400: 1.125rem;
36
+ --font-size-500: 1.25rem;
37
+ --font-size-600: 1.5rem;
38
+ --font-size-700: 1.875rem;
39
+ --font-size-800: 2.25rem;
40
+ --font-size-900: 3rem;
41
+ --font-weight-light: 300;
42
+ --font-weight-regular: 400;
43
+ --font-weight-medium: 500;
44
+ --font-weight-bold: 700;
45
+ --font-line-height-none: 1;
46
+ --font-line-height-tight: 1.25;
47
+ --font-line-height-normal: 1.5;
48
+ --font-line-height-relaxed: 1.75;
49
+ --light-color-primary: #3b82f6;
50
+ --dark-color-primary: #dbeafe;
51
+ --color-primary: light-dark(var(--light-color-primary), var(--dark-color-primary));
52
+ --light-color-success: #22c55e;
53
+ --dark-color-success: #14532d;
54
+ --color-success: light-dark(var(--light-color-success), var(--dark-color-success));
55
+ --light-color-background-primary: #ffffff;
56
+ --dark-color-background-primary: #111827;
57
+ --color-background-primary: light-dark(var(--light-color-background-primary), var(--dark-color-background-primary));
58
+ --light-color-background-secondary: #f3f4f6;
59
+ --dark-color-background-secondary: #6b7280;
60
+ --color-background-secondary: light-dark(var(--light-color-background-secondary), var(--dark-color-background-secondary));
61
+ --light-color-text-primary: #111827;
62
+ --dark-color-text-primary: #ffffff;
63
+ --color-text-primary: light-dark(var(--light-color-text-primary), var(--dark-color-text-primary));
64
+ --light-color-text-inverse: #ffffff;
65
+ --dark-color-text-inverse: #111827;
66
+ --color-text-inverse: light-dark(var(--light-color-text-inverse), var(--dark-color-text-inverse));
67
+ }
package/dist/js/tokens.d.ts ADDED
@@ -0,0 +1,58 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ export const ColorBaseBlueVal100: string;
6
+ export const ColorBaseBlueVal500: string;
7
+ export const ColorBaseBlueVal900: string;
8
+ export const ColorBaseGreenVal100: string;
9
+ export const ColorBaseGreenVal500: string;
10
+ export const ColorBaseGreenVal900: string;
11
+ export const ColorBaseRedVal100: string;
12
+ export const ColorBaseRedVal500: string;
13
+ export const ColorBaseRedVal900: string;
14
+ export const ColorBaseGrayVal100: string;
15
+ export const ColorBaseGrayVal500: string;
16
+ export const ColorBaseGrayVal900: string;
17
+ export const ColorBaseWhite: string;
18
+ export const ColorBaseBlack: string;
19
+ export const LightColorPrimary: string;
20
+ export const LightColorSuccess: string;
21
+ export const LightColorBackgroundPrimary: string;
22
+ export const LightColorBackgroundSecondary: string;
23
+ export const LightColorTextPrimary: string;
24
+ export const LightColorTextInverse: string;
25
+ export const DarkColorPrimary: string;
26
+ export const DarkColorSuccess: string;
27
+ export const DarkColorBackgroundPrimary: string;
28
+ export const DarkColorBackgroundSecondary: string;
29
+ export const DarkColorTextPrimary: string;
30
+ export const DarkColorTextInverse: string;
31
+ export const SpacingVal0: string;
32
+ export const SpacingVal4: string;
33
+ export const SpacingVal8: string;
34
+ export const SpacingVal12: string;
35
+ export const SpacingVal16: string;
36
+ export const SpacingVal24: string;
37
+ export const SpacingVal32: string;
38
+ export const SpacingVal48: string;
39
+ export const SpacingVal64: string;
40
+ export const FontFamilyBase: string;
41
+ export const FontFamilyMono: string;
42
+ export const FontSizeVal100: string;
43
+ export const FontSizeVal200: string;
44
+ export const FontSizeVal300: string;
45
+ export const FontSizeVal400: string;
46
+ export const FontSizeVal500: string;
47
+ export const FontSizeVal600: string;
48
+ export const FontSizeVal700: string;
49
+ export const FontSizeVal800: string;
50
+ export const FontSizeVal900: string;
51
+ export const FontWeightLight: string;
52
+ export const FontWeightRegular: string;
53
+ export const FontWeightMedium: string;
54
+ export const FontWeightBold: string;
55
+ export const FontLineHeightNone: string;
56
+ export const FontLineHeightTight: string;
57
+ export const FontLineHeightNormal: string;
58
+ export const FontLineHeightRelaxed: string;
package/dist/js/tokens.js ADDED
@@ -0,0 +1,58 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ export const ColorBaseBlueVal100 = "#dbeafe";
6
+ export const ColorBaseBlueVal500 = "#3b82f6";
7
+ export const ColorBaseBlueVal900 = "#1e3a8a";
8
+ export const ColorBaseGreenVal100 = "#dcfce7";
9
+ export const ColorBaseGreenVal500 = "#22c55e";
10
+ export const ColorBaseGreenVal900 = "#14532d";
11
+ export const ColorBaseRedVal100 = "#fee2e2";
12
+ export const ColorBaseRedVal500 = "#ef4444";
13
+ export const ColorBaseRedVal900 = "#7f1d1d";
14
+ export const ColorBaseGrayVal100 = "#f3f4f6";
15
+ export const ColorBaseGrayVal500 = "#6b7280";
16
+ export const ColorBaseGrayVal900 = "#111827";
17
+ export const ColorBaseWhite = "#ffffff";
18
+ export const ColorBaseBlack = "#000000";
19
+ export const LightColorPrimary = "#3b82f6";
20
+ export const LightColorSuccess = "#22c55e";
21
+ export const LightColorBackgroundPrimary = "#ffffff";
22
+ export const LightColorBackgroundSecondary = "#f3f4f6";
23
+ export const LightColorTextPrimary = "#111827";
24
+ export const LightColorTextInverse = "#ffffff";
25
+ export const DarkColorPrimary = "#dbeafe";
26
+ export const DarkColorSuccess = "#14532d";
27
+ export const DarkColorBackgroundPrimary = "#111827";
28
+ export const DarkColorBackgroundSecondary = "#6b7280";
29
+ export const DarkColorTextPrimary = "#ffffff";
30
+ export const DarkColorTextInverse = "#111827";
31
+ export const SpacingVal0 = "0";
32
+ export const SpacingVal4 = "0.25rem";
33
+ export const SpacingVal8 = "0.5rem";
34
+ export const SpacingVal12 = "0.75rem";
35
+ export const SpacingVal16 = "1rem";
36
+ export const SpacingVal24 = "1.5rem";
37
+ export const SpacingVal32 = "2rem";
38
+ export const SpacingVal48 = "3rem";
39
+ export const SpacingVal64 = "4rem";
40
+ export const FontFamilyBase = "'IBM Plex Sans', sans-serif";
41
+ export const FontFamilyMono = "'IBM Plex Mono', monospace";
42
+ export const FontSizeVal100 = "0.75rem";
43
+ export const FontSizeVal200 = "0.875rem";
44
+ export const FontSizeVal300 = "1rem";
45
+ export const FontSizeVal400 = "1.125rem";
46
+ export const FontSizeVal500 = "1.25rem";
47
+ export const FontSizeVal600 = "1.5rem";
48
+ export const FontSizeVal700 = "1.875rem";
49
+ export const FontSizeVal800 = "2.25rem";
50
+ export const FontSizeVal900 = "3rem";
51
+ export const FontWeightLight = "300";
52
+ export const FontWeightRegular = "400";
53
+ export const FontWeightMedium = "500";
54
+ export const FontWeightBold = "700";
55
+ export const FontLineHeightNone = "1";
56
+ export const FontLineHeightTight = "1.25";
57
+ export const FontLineHeightNormal = "1.5";
58
+ export const FontLineHeightRelaxed = "1.75";
package/dist/js/tokens.mjs ADDED
@@ -0,0 +1,58 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ export const ColorBaseBlueVal100 = "#dbeafe";
6
+ export const ColorBaseBlueVal500 = "#3b82f6";
7
+ export const ColorBaseBlueVal900 = "#1e3a8a";
8
+ export const ColorBaseGreenVal100 = "#dcfce7";
9
+ export const ColorBaseGreenVal500 = "#22c55e";
10
+ export const ColorBaseGreenVal900 = "#14532d";
11
+ export const ColorBaseRedVal100 = "#fee2e2";
12
+ export const ColorBaseRedVal500 = "#ef4444";
13
+ export const ColorBaseRedVal900 = "#7f1d1d";
14
+ export const ColorBaseGrayVal100 = "#f3f4f6";
15
+ export const ColorBaseGrayVal500 = "#6b7280";
16
+ export const ColorBaseGrayVal900 = "#111827";
17
+ export const ColorBaseWhite = "#ffffff";
18
+ export const ColorBaseBlack = "#000000";
19
+ export const LightColorPrimary = "#3b82f6";
20
+ export const LightColorSuccess = "#22c55e";
21
+ export const LightColorBackgroundPrimary = "#ffffff";
22
+ export const LightColorBackgroundSecondary = "#f3f4f6";
23
+ export const LightColorTextPrimary = "#111827";
24
+ export const LightColorTextInverse = "#ffffff";
25
+ export const DarkColorPrimary = "#dbeafe";
26
+ export const DarkColorSuccess = "#14532d";
27
+ export const DarkColorBackgroundPrimary = "#111827";
28
+ export const DarkColorBackgroundSecondary = "#6b7280";
29
+ export const DarkColorTextPrimary = "#ffffff";
30
+ export const DarkColorTextInverse = "#111827";
31
+ export const SpacingVal0 = "0";
32
+ export const SpacingVal4 = "0.25rem";
33
+ export const SpacingVal8 = "0.5rem";
34
+ export const SpacingVal12 = "0.75rem";
35
+ export const SpacingVal16 = "1rem";
36
+ export const SpacingVal24 = "1.5rem";
37
+ export const SpacingVal32 = "2rem";
38
+ export const SpacingVal48 = "3rem";
39
+ export const SpacingVal64 = "4rem";
40
+ export const FontFamilyBase = "'IBM Plex Sans', sans-serif";
41
+ export const FontFamilyMono = "'IBM Plex Mono', monospace";
42
+ export const FontSizeVal100 = "0.75rem";
43
+ export const FontSizeVal200 = "0.875rem";
44
+ export const FontSizeVal300 = "1rem";
45
+ export const FontSizeVal400 = "1.125rem";
46
+ export const FontSizeVal500 = "1.25rem";
47
+ export const FontSizeVal600 = "1.5rem";
48
+ export const FontSizeVal700 = "1.875rem";
49
+ export const FontSizeVal800 = "2.25rem";
50
+ export const FontSizeVal900 = "3rem";
51
+ export const FontWeightLight = "300";
52
+ export const FontWeightRegular = "400";
53
+ export const FontWeightMedium = "500";
54
+ export const FontWeightBold = "700";
55
+ export const FontLineHeightNone = "1";
56
+ export const FontLineHeightTight = "1.25";
57
+ export const FontLineHeightNormal = "1.5";
58
+ export const FontLineHeightRelaxed = "1.75";
package/dist/scss/_variables.scss ADDED
@@ -0,0 +1,54 @@
1
+ $color-base-blue-100: #dbeafe;
2
+ $color-base-blue-500: #3b82f6;
3
+ $color-base-blue-900: #1e3a8a;
4
+ $color-base-green-100: #dcfce7;
5
+ $color-base-green-500: #22c55e;
6
+ $color-base-green-900: #14532d;
7
+ $color-base-red-100: #fee2e2;
8
+ $color-base-red-500: #ef4444;
9
+ $color-base-red-900: #7f1d1d;
10
+ $color-base-gray-100: #f3f4f6;
11
+ $color-base-gray-500: #6b7280;
12
+ $color-base-gray-900: #111827;
13
+ $color-base-white: #ffffff;
14
+ $color-base-black: #000000;
15
+ $color-semantic-light-primary: #3b82f6;
16
+ $color-semantic-light-success: #22c55e;
17
+ $color-semantic-light-background-primary: #ffffff;
18
+ $color-semantic-light-background-secondary: #f3f4f6;
19
+ $color-semantic-light-text-primary: #111827;
20
+ $color-semantic-light-text-inverse: #ffffff;
21
+ $color-semantic-dark-primary: #dbeafe;
22
+ $color-semantic-dark-success: #14532d;
23
+ $color-semantic-dark-background-primary: #111827;
24
+ $color-semantic-dark-background-secondary: #6b7280;
25
+ $color-semantic-dark-text-primary: #ffffff;
26
+ $color-semantic-dark-text-inverse: #111827;
27
+ $spacing-0: 0;
28
+ $spacing-4: 0.25rem;
29
+ $spacing-8: 0.5rem;
30
+ $spacing-12: 0.75rem;
31
+ $spacing-16: 1rem;
32
+ $spacing-24: 1.5rem;
33
+ $spacing-32: 2rem;
34
+ $spacing-48: 3rem;
35
+ $spacing-64: 4rem;
36
+ $font-family-base: 'IBM Plex Sans', sans-serif;
37
+ $font-family-mono: 'IBM Plex Mono', monospace;
38
+ $font-size-100: 0.75rem;
39
+ $font-size-200: 0.875rem;
40
+ $font-size-300: 1rem;
41
+ $font-size-400: 1.125rem;
42
+ $font-size-500: 1.25rem;
43
+ $font-size-600: 1.5rem;
44
+ $font-size-700: 1.875rem;
45
+ $font-size-800: 2.25rem;
46
+ $font-size-900: 3rem;
47
+ $font-weight-light: 300;
48
+ $font-weight-regular: 400;
49
+ $font-weight-medium: 500;
50
+ $font-weight-bold: 700;
51
+ $font-line-height-none: 1;
52
+ $font-line-height-tight: 1.25;
53
+ $font-line-height-normal: 1.5;
54
+ $font-line-height-relaxed: 1.75;
package/package.json ADDED
@@ -0,0 +1,46 @@
1
+ {
2
+ "name": "@dezkareid/design-tokens",
3
+ "version": "0.0.0",
4
+ "description": "Design tokens for dezkareid design system",
5
+ "main": "dist/js/tokens.js",
6
+ "module": "dist/js/tokens.mjs",
7
+ "types": "dist/js/tokens.d.ts",
8
+ "sideEffects": [
9
+ "*.css",
10
+ "*.scss"
11
+ ],
12
+ "files": [
13
+ "dist"
14
+ ],
15
+ "publishConfig": {
16
+ "access": "public",
17
+ "provenance": true
18
+ },
19
+ "repository": {
20
+ "type": "git",
21
+ "url": "git+https://github.com/dezkareid/dezkareid.git",
22
+ "directory": "design-system/design-tokens"
23
+ },
24
+ "keywords": [
25
+ "design-tokens",
26
+ "style-dictionary",
27
+ "design-system"
28
+ ],
29
+ "author": "Joel Humberto Gomez Paredes <elmaildeldezkareid@gmail.com>",
30
+ "license": "ISC",
31
+ "bugs": {
32
+ "url": "https://github.com/dezkareid/dezkareid/issues"
33
+ },
34
+ "homepage": "https://github.com/dezkareid/dezkareid/tree/main/projects/dezkareid/design-system/design-tokens#readme",
35
+ "scripts": {
36
+ "build": "style-dictionary build --config sd.config.js",
37
+ "release": "semantic-release"
38
+ },
39
+ "devDependencies": {
40
+ "style-dictionary": "5.2.0",
41
+ "@semantic-release/changelog": "6.0.3",
42
+ "@semantic-release/git": "10.0.1",
43
+ "semantic-release": "25.0.3",
44
+ "semantic-release-monorepo": "8.0.2"
45
+ }
46
+ }