@daikin-oss/dds-tokens 0.4.2 → 1.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 (37) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/README.md +115 -31
  3. package/build/css/aaf/Dark/tailwind4.css +130 -0
  4. package/build/css/aaf/Dark/variables.css +8 -8
  5. package/build/css/aaf/Light/tailwind4.css +130 -0
  6. package/build/css/aaf/Light/variables.css +8 -8
  7. package/build/css/daikin/Dark/tailwind4.css +173 -0
  8. package/build/css/daikin/Dark/variables.css +8 -8
  9. package/build/css/daikin/Light/tailwind4.css +173 -0
  10. package/build/css/daikin/Light/variables.css +8 -8
  11. package/build/js/aaf/Dark/variables.cjs +8 -8
  12. package/build/js/aaf/Dark/variables.d.cts +8 -8
  13. package/build/js/aaf/Dark/variables.d.ts +8 -8
  14. package/build/js/aaf/Dark/variables.js +8 -8
  15. package/build/js/aaf/Light/variables.cjs +8 -8
  16. package/build/js/aaf/Light/variables.d.cts +8 -8
  17. package/build/js/aaf/Light/variables.d.ts +8 -8
  18. package/build/js/aaf/Light/variables.js +8 -8
  19. package/build/js/daikin/Dark/variables.cjs +8 -8
  20. package/build/js/daikin/Dark/variables.d.cts +8 -8
  21. package/build/js/daikin/Dark/variables.d.ts +8 -8
  22. package/build/js/daikin/Dark/variables.js +8 -8
  23. package/build/js/daikin/Light/variables.cjs +8 -8
  24. package/build/js/daikin/Light/variables.d.cts +8 -8
  25. package/build/js/daikin/Light/variables.d.ts +8 -8
  26. package/build/js/daikin/Light/variables.js +8 -8
  27. package/build/json/aaf/Dark/tokens.json +40 -40
  28. package/build/json/aaf/Light/tokens.json +40 -40
  29. package/build/json/daikin/Dark/tokens.json +40 -40
  30. package/build/json/daikin/Light/tokens.json +40 -40
  31. package/build/scss/aaf/Dark/_mixins.scss +8 -8
  32. package/build/scss/aaf/Light/_mixins.scss +8 -8
  33. package/build/scss/daikin/Dark/_mixins.scss +8 -8
  34. package/build/scss/daikin/Light/_mixins.scss +8 -8
  35. package/build/tailwind4.css +173 -0
  36. package/package.json +10 -3
  37. package/themes/reference.json +47 -78
package/CHANGELOG.md CHANGED
@@ -1,5 +1,18 @@
1
1
  # Changelog
2
2
 
3
+ ## 1.0.0
4
+
5
+ ### Major Changes
6
+
7
+ - [#61](https://github.com/dsv-rp/dds-tokens/pull/61) [`fff9fa2`](https://github.com/dsv-rp/dds-tokens/commit/fff9fa208f3d15053bec88efb1212cfc4dcadd87) Thanks [@yodas7](https://github.com/yodas7)! - Release v1.0.0
8
+
9
+ ### Minor Changes
10
+
11
+ - **BREAKING CHANGE**: 32 token(s) removed (`font-regular-bold-normal-300`, `font-regular-bold-normal-350`, `font-regular-bold-normal-500`, `font-regular-bold-tight-300`, `font-regular-bold-tight-400` and more).
12
+ 32 token(s) added.
13
+
14
+ - [#58](https://github.com/dsv-rp/dds-tokens/pull/58) [`0cc4752`](https://github.com/dsv-rp/dds-tokens/commit/0cc475226648b9019f28f35be2ef2dd77371c0ef) Thanks [@yodas7](https://github.com/yodas7)! - Build Tailwind CSS v4 Theme CSS Files.
15
+
3
16
  ## 0.4.2
4
17
 
5
18
  ### Patch Changes
package/README.md CHANGED
@@ -1,15 +1,19 @@
1
1
  # dds-tokens
2
2
 
3
- This package contains:
3
+ This package provides design tokens for the Daikin Design System (DDS) in multiple formats:
4
4
 
5
- - Tokens as JS, CSS and SCSS variables
6
- - Brand-specific tokens (e.g. `Daikin` and `AAF`)
7
- - `Light` and `Dark` mode for each themes
8
- - General styles as `variables.(css|js)`
9
- - Component-specific styles (e.g. `buttons.css`)
10
- - SCSS mixins
5
+ - **JS/TypeScript**: ESM and CommonJS modules with TypeScript declarations
6
+ - **CSS**: CSS custom properties (CSS variables)
7
+ - **SCSS**: Sass mixins for flexible integration
8
+ - **Tailwind CSS v4**: Theme files for Tailwind CSS integration
9
+ - **JSON**: Token metadata for tooling and integrations
11
10
 
12
- For the complete list of outputs, please check out the files output in the `build` folder.
11
+ **Available themes:**
12
+
13
+ - Brands: `Daikin` and `AAF`
14
+ - Color schemes: `Light` and `Dark` mode for each brand
15
+
16
+ For the complete list of output files, check the `build` folder after installation.
13
17
 
14
18
  ## Usage
15
19
 
@@ -19,18 +23,6 @@ Install package:
19
23
  npm install @daikin-oss/dds-tokens
20
24
  ```
21
25
 
22
- ### Import JS variables
23
-
24
- ```js
25
- // ESM
26
- import { buttonColorBackgroundPrimaryActive } from "@daikin-oss/dds-tokens/js/daikin/Light/variables.js";
27
-
28
- // CommonJS
29
- const {
30
- buttonColorBackgroundPrimaryActive,
31
- } = require("@daikin-oss/dds-tokens/js/daikin/Light/variables.js");
32
- ```
33
-
34
26
  ### Import CSS
35
27
 
36
28
  ```js
@@ -43,12 +35,7 @@ or
43
35
  @import url("@daikin-oss/dds-tokens/css/daikin/Dark/variables.css");
44
36
  ```
45
37
 
46
- The above includes all CSS classes - including core styles and components.
47
- There are also component-specific files if you don't need everything:
48
-
49
- ```js
50
- import buttonStyles from "@daikin-oss/dds-tokens/css/daikin/Dark/buttons.css";
51
- ```
38
+ This imports all design tokens as CSS custom properties under the `:root` selector.
52
39
 
53
40
  ### Import SCSS mixins
54
41
 
@@ -93,10 +80,107 @@ Import individual themes:
93
80
  }
94
81
  ```
95
82
 
96
- ## JSONs
83
+ ### Tailwind CSS v4 Integration
84
+
85
+ This package provides Tailwind CSS v4 theme files that map DDS tokens to Tailwind CSS variables.
86
+
87
+ #### Common theme file (theme-agnostic)
88
+
89
+ The `tailwind4.css` file provides a theme-agnostic mapping that works with any DDS theme:
90
+
91
+ ```css
92
+ @import "@daikin-oss/dds-tokens/tailwind4.css";
93
+ ```
94
+
95
+ This file uses `@theme inline` and references DDS CSS variables without fallback values. You must load a DDS theme CSS file separately to provide the actual token values.
96
+
97
+ Example:
98
+
99
+ ```css
100
+ @import "@daikin-oss/dds-tokens/css/daikin/Light/variables.css";
101
+ @import "@daikin-oss/dds-tokens/tailwind4.css";
102
+ ```
103
+
104
+ #### Theme-specific files
105
+
106
+ You can also use theme-specific Tailwind CSS files that include fallback values:
107
+
108
+ ```css
109
+ @import "@daikin-oss/dds-tokens/css/daikin/Light/tailwind4.css";
110
+ ```
111
+
112
+ Available files:
113
+
114
+ - `css/daikin/Light/tailwind4.css`
115
+ - `css/daikin/Dark/tailwind4.css`
116
+ - `css/aaf/Light/tailwind4.css`
117
+ - `css/aaf/Dark/tailwind4.css`
118
+
119
+ These files use `@theme` (not inline) with fallback values, allowing them to work standalone without requiring a separate DDS theme CSS file.
120
+
121
+ #### Variable mapping
122
+
123
+ DDS tokens are mapped to Tailwind CSS variables based on their token type:
124
+
125
+ - `color` → `--color-dds-*`
126
+ - `spacing` → `--spacing-dds-*`
127
+ - `borderRadius` → `--radius-dds-*`
128
+ - `borderWidth` → `--border-width-dds-*`
129
+ - `fontSize` → `--font-size-dds-*`
130
+ - `fontWeight` → `--font-weight-dds-*`
131
+ - `fontFamily` → `--font-family-dds-*`
132
+ - `lineHeight` → `--line-height-dds-*`
133
+
134
+ Example output:
135
+
136
+ ```css
137
+ /* Common file (build/tailwind4.css) */
138
+ @theme inline {
139
+ --color-dds-color-blue-10: var(--dds-color-blue-10);
140
+ --spacing-dds-space-100: var(--dds-space-100);
141
+ /* ... */
142
+ }
143
+
144
+ /* Theme-specific file (build/css/daikin/Light/tailwind4.css) */
145
+ @theme {
146
+ --color-dds-color-blue-10: var(--dds-color-blue-10, #ddf3fc);
147
+ --spacing-dds-space-100: var(--dds-space-100, 4px);
148
+ /* ... */
149
+ }
150
+ ```
151
+
152
+ ### Import JS variables
97
153
 
98
- There are JSON files under `json/` that lists the types and values of the tokens.
99
- These are basically for internal use and are used to integrate design tokens with Tailwind CSS.
100
- The structure of the JSON files is `{ "<token name>": ["<token value>", "<style-dictionary token type>", "<tokens-studio token type>" | null] }`.
154
+ ```js
155
+ // ESM
156
+ import { colorBlue10 } from "@daikin-oss/dds-tokens/js/daikin/Light/variables.js";
157
+
158
+ // CommonJS
159
+ const {
160
+ colorBlue10,
161
+ } = require("@daikin-oss/dds-tokens/js/daikin/Light/variables.js");
162
+ ```
163
+
164
+ ### Use JSON files
165
+
166
+ JSON files under `json/` provide token metadata including types and values. These are primarily for internal use and tooling integrations.
167
+
168
+ Available files:
169
+
170
+ - `json/daikin/Light/tokens.json`
171
+ - `json/daikin/Dark/tokens.json`
172
+ - `json/aaf/Light/tokens.json`
173
+ - `json/aaf/Dark/tokens.json`
174
+
175
+ File structure: `{ "<token name>": ["<token value>", "<style-dictionary token type>", "<tokens-studio token type>" | null] }`
176
+
177
+ Example:
178
+
179
+ ```json
180
+ {
181
+ "color-blue-10": ["#ddf3fc", "color", null],
182
+ "space-100": ["4px", "dimension", "spacing"]
183
+ }
184
+ ```
101
185
 
102
- In addition, the theme JSON files before building, which are located in `themes/`, are also published in the same path in the package.
186
+ Additionally, the source theme JSON files (located in `themes/`) are published in the same path within the package for advanced use cases.
package/build/css/aaf/Dark/tailwind4.css ADDED
@@ -0,0 +1,130 @@
1
+ @theme {
2
+ --color-dds-color-blue-10: var(--dds-color-blue-10, #ddf3fc);
3
+ --color-dds-color-blue-20: var(--dds-color-blue-20, #bbe7f9);
4
+ --color-dds-color-blue-30: var(--dds-color-blue-30, #98dbf7);
5
+ --color-dds-color-blue-40: var(--dds-color-blue-40, #76cff4);
6
+ --color-dds-color-blue-50: var(--dds-color-blue-50, #54c3f1);
7
+ --color-dds-color-blue-60: var(--dds-color-blue-60, #30ade9);
8
+ --color-dds-color-blue-70: var(--dds-color-blue-70, #0097e0);
9
+ --color-dds-color-blue-80: var(--dds-color-blue-80, #0081c0);
10
+ --color-dds-color-blue-90: var(--dds-color-blue-90, #00689a);
11
+ --color-dds-color-blue-100: var(--dds-color-blue-100, #005077);
12
+ --color-dds-color-blue-110: var(--dds-color-blue-110, #004160);
13
+ --color-dds-color-blue-120: var(--dds-color-blue-120, #002b40);
14
+ --color-dds-color-green-10: var(--dds-color-green-10, #ccfef8);
15
+ --color-dds-color-green-20: var(--dds-color-green-20, #9bfaef);
16
+ --color-dds-color-green-30: var(--dds-color-green-30, #6cf5e4);
17
+ --color-dds-color-green-40: var(--dds-color-green-40, #3bf1dc);
18
+ --color-dds-color-green-50: var(--dds-color-green-50, #13e5cc);
19
+ --color-dds-color-green-60: var(--dds-color-green-60, #00c3ac);
20
+ --color-dds-color-green-70: var(--dds-color-green-70, #008f7e);
21
+ --color-dds-color-green-80: var(--dds-color-green-80, #007b6c);
22
+ --color-dds-color-green-90: var(--dds-color-green-90, #00665a);
23
+ --color-dds-color-green-100: var(--dds-color-green-100, #005248);
24
+ --color-dds-color-green-110: var(--dds-color-green-110, #003d36);
25
+ --color-dds-color-green-120: var(--dds-color-green-120, #002924);
26
+ --color-dds-color-yellow-10: var(--dds-color-yellow-10, #fff4d7);
27
+ --color-dds-color-yellow-20: var(--dds-color-yellow-20, #ffeaaf);
28
+ --color-dds-color-yellow-30: var(--dds-color-yellow-30, #ffd45f);
29
+ --color-dds-color-yellow-40: var(--dds-color-yellow-40, #ffc936);
30
+ --color-dds-color-yellow-50: var(--dds-color-yellow-50, #ffbf0e);
31
+ --color-dds-color-yellow-60: var(--dds-color-yellow-60, #efb000);
32
+ --color-dds-color-yellow-70: var(--dds-color-yellow-70, #b88700);
33
+ --color-dds-color-yellow-80: var(--dds-color-yellow-80, #9e7400);
34
+ --color-dds-color-yellow-90: var(--dds-color-yellow-90, #836000);
35
+ --color-dds-color-yellow-100: var(--dds-color-yellow-100, #694d00);
36
+ --color-dds-color-yellow-110: var(--dds-color-yellow-110, #4f3a00);
37
+ --color-dds-color-yellow-120: var(--dds-color-yellow-120, #352700);
38
+ --color-dds-color-orange-10: var(--dds-color-orange-10, #feead9);
39
+ --color-dds-color-orange-20: var(--dds-color-orange-20, #fcd4b3);
40
+ --color-dds-color-orange-30: var(--dds-color-orange-30, #fbbf8e);
41
+ --color-dds-color-orange-40: var(--dds-color-orange-40, #ff9c4b);
42
+ --color-dds-color-orange-50: var(--dds-color-orange-50, #fd8b2e);
43
+ --color-dds-color-orange-60: var(--dds-color-orange-60, #fa7a12);
44
+ --color-dds-color-orange-70: var(--dds-color-orange-70, #e46b08);
45
+ --color-dds-color-orange-80: var(--dds-color-orange-80, #b45100);
46
+ --color-dds-color-orange-90: var(--dds-color-orange-90, #964400);
47
+ --color-dds-color-orange-100: var(--dds-color-orange-100, #783600);
48
+ --color-dds-color-orange-110: var(--dds-color-orange-110, #5a2900);
49
+ --color-dds-color-orange-120: var(--dds-color-orange-120, #3c1b00);
50
+ --color-dds-color-red-10: var(--dds-color-red-10, #fdd9db);
51
+ --color-dds-color-red-20: var(--dds-color-red-20, #fbb3b7);
52
+ --color-dds-color-red-30: var(--dds-color-red-30, #f98d93);
53
+ --color-dds-color-red-40: var(--dds-color-red-40, #f7666f);
54
+ --color-dds-color-red-50: var(--dds-color-red-50, #f4404b);
55
+ --color-dds-color-red-60: var(--dds-color-red-60, #f21a27);
56
+ --color-dds-color-red-70: var(--dds-color-red-70, #d80c18);
57
+ --color-dds-color-red-80: var(--dds-color-red-80, #b90a15);
58
+ --color-dds-color-red-90: var(--dds-color-red-90, #9a0911);
59
+ --color-dds-color-red-100: var(--dds-color-red-100, #7b070e);
60
+ --color-dds-color-red-110: var(--dds-color-red-110, #5d050a);
61
+ --color-dds-color-red-120: var(--dds-color-red-120, #3e0307);
62
+ --color-dds-color-gray-10: var(--dds-color-gray-10, #f2f2f2);
63
+ --color-dds-color-gray-20: var(--dds-color-gray-20, #ebebeb);
64
+ --color-dds-color-gray-30: var(--dds-color-gray-30, #dcdcdc);
65
+ --color-dds-color-gray-40: var(--dds-color-gray-40, #cecece);
66
+ --color-dds-color-gray-50: var(--dds-color-gray-50, #bfbfbf);
67
+ --color-dds-color-gray-60: var(--dds-color-gray-60, #a0a0a0);
68
+ --color-dds-color-gray-70: var(--dds-color-gray-70, #828282);
69
+ --color-dds-color-gray-80: var(--dds-color-gray-80, #616161);
70
+ --color-dds-color-gray-90: var(--dds-color-gray-90, #515151);
71
+ --color-dds-color-gray-100: var(--dds-color-gray-100, #414141);
72
+ --color-dds-color-gray-110: var(--dds-color-gray-110, #313131);
73
+ --color-dds-color-gray-120: var(--dds-color-gray-120, #212121);
74
+ --color-dds-color-black: var(--dds-color-black, #000000);
75
+ --color-dds-color-white: var(--dds-color-white, #ffffff);
76
+ --color-dds-color-blue-gray-10: var(--dds-color-blue-gray-10, #eef0f2);
77
+ --color-dds-color-blue-gray-20: var(--dds-color-blue-gray-20, #d8dde0);
78
+ --color-dds-color-blue-gray-30: var(--dds-color-blue-gray-30, #bbc1c7);
79
+ --color-dds-color-blue-gray-40: var(--dds-color-blue-gray-40, #a4acb4);
80
+ --color-dds-color-blue-gray-50: var(--dds-color-blue-gray-50, #8d98a1);
81
+ --color-dds-color-blue-gray-60: var(--dds-color-blue-gray-60, #76838e);
82
+ --color-dds-color-blue-gray-70: var(--dds-color-blue-gray-70, #636e78);
83
+ --color-dds-color-blue-gray-80: var(--dds-color-blue-gray-80, #505961);
84
+ --color-dds-color-blue-gray-90: var(--dds-color-blue-gray-90, #444b52);
85
+ --color-dds-color-blue-gray-100: var(--dds-color-blue-gray-100, #30353a);
86
+ --color-dds-color-blue-gray-110: var(--dds-color-blue-gray-110, #282c30);
87
+ --color-dds-color-blue-gray-120: var(--dds-color-blue-gray-120, #1b1e21);
88
+ --color-dds-color-dark-gray-105: var(--dds-color-dark-gray-105, #383838);
89
+ --color-dds-color-dark-gray-115: var(--dds-color-dark-gray-115, #282828);
90
+ --color-dds-color-dark-gray-125: var(--dds-color-dark-gray-125, #1a1a1a);
91
+ --color-dds-color-purple-10: var(--dds-color-purple-10, #f0ddf3);
92
+ --color-dds-color-purple-20: var(--dds-color-purple-20, #e1bbe8);
93
+ --color-dds-color-purple-30: var(--dds-color-purple-30, #d399dc);
94
+ --color-dds-color-purple-40: var(--dds-color-purple-40, #c477d0);
95
+ --color-dds-color-purple-50: var(--dds-color-purple-50, #b556c5);
96
+ --color-dds-color-purple-60: var(--dds-color-purple-60, #a03db0);
97
+ --color-dds-color-purple-70: var(--dds-color-purple-70, #81318e);
98
+ --color-dds-color-purple-80: var(--dds-color-purple-80, #6f2a7a);
99
+ --color-dds-color-purple-90: var(--dds-color-purple-90, #5c2365);
100
+ --color-dds-color-purple-100: var(--dds-color-purple-100, #4a1c51);
101
+ --color-dds-color-purple-110: var(--dds-color-purple-110, #37153d);
102
+ --color-dds-color-purple-120: var(--dds-color-purple-120, #250e29);
103
+ --radius-dds-border-radius-100: var(--dds-border-radius-100, 4px);
104
+ --radius-dds-border-radius-200: var(--dds-border-radius-200, 8px);
105
+ --radius-dds-border-radius-050: var(--dds-border-radius-050, 2px);
106
+ --border-width-dds-border-width-100: var(--dds-border-width-100, 4px);
107
+ --border-width-dds-border-width-025: var(--dds-border-width-025, 1px);
108
+ --border-width-dds-border-width-050: var(--dds-border-width-050, 2px);
109
+ --spacing-dds-space-100: var(--dds-space-100, 4px);
110
+ --spacing-dds-space-200: var(--dds-space-200, 8px);
111
+ --spacing-dds-space-300: var(--dds-space-300, 12px);
112
+ --spacing-dds-space-400: var(--dds-space-400, 16px);
113
+ --spacing-dds-space-600: var(--dds-space-600, 24px);
114
+ --spacing-dds-space-800: var(--dds-space-800, 32px);
115
+ --spacing-dds-space-1200: var(--dds-space-1200, 48px);
116
+ --spacing-dds-space-1600: var(--dds-space-1600, 64px);
117
+ --spacing-dds-space-050: var(--dds-space-050, 2px);
118
+ --font-size-dds-font-size-300: var(--dds-font-size-300, 12px);
119
+ --font-size-dds-font-size-350: var(--dds-font-size-350, 14px);
120
+ --font-size-dds-font-size-400: var(--dds-font-size-400, 16px);
121
+ --font-size-dds-font-size-500: var(--dds-font-size-500, 20px);
122
+ --font-size-dds-font-size-600: var(--dds-font-size-600, 24px);
123
+ --font-size-dds-font-size-700: var(--dds-font-size-700, 28px);
124
+ --font-size-dds-font-size-800: var(--dds-font-size-800, 32px);
125
+ --line-height-dds-font-line-height-tight: var(--dds-font-line-height-tight, 1.3);
126
+ --line-height-dds-font-line-height-normal: var(--dds-font-line-height-normal, 1.5);
127
+ --font-weight-dds-font-weight-bold: var(--dds-font-weight-bold, 700);
128
+ --font-weight-dds-font-weight-regular: var(--dds-font-weight-regular, 400);
129
+ --font-family-dds-font-family-base: var(--dds-font-family-base, Roboto);
130
+ }
package/build/css/aaf/Dark/variables.css CHANGED
@@ -116,6 +116,8 @@
116
116
  --dds-space-400: 16px;
117
117
  --dds-space-600: 24px;
118
118
  --dds-space-800: 32px;
119
+ --dds-space-1200: 48px;
120
+ --dds-space-1600: 64px;
119
121
  --dds-space-050: 2px;
120
122
  --dds-font-regular-normal-300: 400 12px/1.5 Roboto;
121
123
  --dds-font-regular-normal-350: 400 14px/1.5 Roboto;
@@ -125,18 +127,13 @@
125
127
  --dds-font-regular-tight-350: 400 14px/1.3 Roboto;
126
128
  --dds-font-regular-tight-400: 400 16px/1.3 Roboto;
127
129
  --dds-font-regular-tight-500: 400 20px/1.3 Roboto;
128
- --dds-font-regular-bold-normal-300: 700 12px/1.5 Roboto;
129
- --dds-font-regular-bold-normal-350: 700 14px/1.5 Roboto;
130
- --dds-font-regular-bold-normal-400: 700 16px/1.5 Roboto;
131
- --dds-font-regular-bold-normal-500: 700 20px/1.5 Roboto;
132
- --dds-font-regular-bold-tight-300: 700 12px/1.3 Roboto;
133
- --dds-font-regular-bold-tight-350: 700 14px/1.3 Roboto;
134
- --dds-font-regular-bold-tight-400: 700 16px/1.3 Roboto;
135
- --dds-font-regular-bold-tight-500: 700 20px/1.3 Roboto;
136
130
  --dds-font-size-300: 12px;
137
131
  --dds-font-size-350: 14px;
138
132
  --dds-font-size-400: 16px;
139
133
  --dds-font-size-500: 20px;
134
+ --dds-font-size-600: 24px;
135
+ --dds-font-size-700: 28px;
136
+ --dds-font-size-800: 32px;
140
137
  --dds-font-line-height-tight: 1.3;
141
138
  --dds-font-line-height-normal: 1.5;
142
139
  --dds-font-weight-bold: 700;
@@ -150,4 +147,7 @@
150
147
  --dds-font-bold-tight-350: 700 14px/1.3 Roboto;
151
148
  --dds-font-bold-tight-400: 700 16px/1.3 Roboto;
152
149
  --dds-font-bold-tight-500: 700 20px/1.3 Roboto;
150
+ --dds-font-bold-tight-600: 700 24px/1.3 Roboto;
151
+ --dds-font-bold-tight-700: 700 28px/1.3 Roboto;
152
+ --dds-font-bold-tight-800: 700 32px/1.3 Roboto;
153
153
  }
package/build/css/aaf/Light/tailwind4.css ADDED
@@ -0,0 +1,130 @@
1
+ @theme {
2
+ --color-dds-color-blue-10: var(--dds-color-blue-10, #ddf3fc);
3
+ --color-dds-color-blue-20: var(--dds-color-blue-20, #bbe7f9);
4
+ --color-dds-color-blue-30: var(--dds-color-blue-30, #98dbf7);
5
+ --color-dds-color-blue-40: var(--dds-color-blue-40, #76cff4);
6
+ --color-dds-color-blue-50: var(--dds-color-blue-50, #54c3f1);
7
+ --color-dds-color-blue-60: var(--dds-color-blue-60, #30ade9);
8
+ --color-dds-color-blue-70: var(--dds-color-blue-70, #0097e0);
9
+ --color-dds-color-blue-80: var(--dds-color-blue-80, #0081c0);
10
+ --color-dds-color-blue-90: var(--dds-color-blue-90, #00689a);
11
+ --color-dds-color-blue-100: var(--dds-color-blue-100, #005077);
12
+ --color-dds-color-blue-110: var(--dds-color-blue-110, #004160);
13
+ --color-dds-color-blue-120: var(--dds-color-blue-120, #002b40);
14
+ --color-dds-color-green-10: var(--dds-color-green-10, #ccfef8);
15
+ --color-dds-color-green-20: var(--dds-color-green-20, #9bfaef);
16
+ --color-dds-color-green-30: var(--dds-color-green-30, #6cf5e4);
17
+ --color-dds-color-green-40: var(--dds-color-green-40, #3bf1dc);
18
+ --color-dds-color-green-50: var(--dds-color-green-50, #13e5cc);
19
+ --color-dds-color-green-60: var(--dds-color-green-60, #00c3ac);
20
+ --color-dds-color-green-70: var(--dds-color-green-70, #008f7e);
21
+ --color-dds-color-green-80: var(--dds-color-green-80, #007b6c);
22
+ --color-dds-color-green-90: var(--dds-color-green-90, #00665a);
23
+ --color-dds-color-green-100: var(--dds-color-green-100, #005248);
24
+ --color-dds-color-green-110: var(--dds-color-green-110, #003d36);
25
+ --color-dds-color-green-120: var(--dds-color-green-120, #002924);
26
+ --color-dds-color-yellow-10: var(--dds-color-yellow-10, #fff4d7);
27
+ --color-dds-color-yellow-20: var(--dds-color-yellow-20, #ffeaaf);
28
+ --color-dds-color-yellow-30: var(--dds-color-yellow-30, #ffd45f);
29
+ --color-dds-color-yellow-40: var(--dds-color-yellow-40, #ffc936);
30
+ --color-dds-color-yellow-50: var(--dds-color-yellow-50, #ffbf0e);
31
+ --color-dds-color-yellow-60: var(--dds-color-yellow-60, #efb000);
32
+ --color-dds-color-yellow-70: var(--dds-color-yellow-70, #b88700);
33
+ --color-dds-color-yellow-80: var(--dds-color-yellow-80, #9e7400);
34
+ --color-dds-color-yellow-90: var(--dds-color-yellow-90, #836000);
35
+ --color-dds-color-yellow-100: var(--dds-color-yellow-100, #694d00);
36
+ --color-dds-color-yellow-110: var(--dds-color-yellow-110, #4f3a00);
37
+ --color-dds-color-yellow-120: var(--dds-color-yellow-120, #352700);
38
+ --color-dds-color-orange-10: var(--dds-color-orange-10, #feead9);
39
+ --color-dds-color-orange-20: var(--dds-color-orange-20, #fcd4b3);
40
+ --color-dds-color-orange-30: var(--dds-color-orange-30, #fbbf8e);
41
+ --color-dds-color-orange-40: var(--dds-color-orange-40, #ff9c4b);
42
+ --color-dds-color-orange-50: var(--dds-color-orange-50, #fd8b2e);
43
+ --color-dds-color-orange-60: var(--dds-color-orange-60, #fa7a12);
44
+ --color-dds-color-orange-70: var(--dds-color-orange-70, #e46b08);
45
+ --color-dds-color-orange-80: var(--dds-color-orange-80, #b45100);
46
+ --color-dds-color-orange-90: var(--dds-color-orange-90, #964400);
47
+ --color-dds-color-orange-100: var(--dds-color-orange-100, #783600);
48
+ --color-dds-color-orange-110: var(--dds-color-orange-110, #5a2900);
49
+ --color-dds-color-orange-120: var(--dds-color-orange-120, #3c1b00);
50
+ --color-dds-color-red-10: var(--dds-color-red-10, #fdd9db);
51
+ --color-dds-color-red-20: var(--dds-color-red-20, #fbb3b7);
52
+ --color-dds-color-red-30: var(--dds-color-red-30, #f98d93);
53
+ --color-dds-color-red-40: var(--dds-color-red-40, #f7666f);
54
+ --color-dds-color-red-50: var(--dds-color-red-50, #f4404b);
55
+ --color-dds-color-red-60: var(--dds-color-red-60, #f21a27);
56
+ --color-dds-color-red-70: var(--dds-color-red-70, #d80c18);
57
+ --color-dds-color-red-80: var(--dds-color-red-80, #b90a15);
58
+ --color-dds-color-red-90: var(--dds-color-red-90, #9a0911);
59
+ --color-dds-color-red-100: var(--dds-color-red-100, #7b070e);
60
+ --color-dds-color-red-110: var(--dds-color-red-110, #5d050a);
61
+ --color-dds-color-red-120: var(--dds-color-red-120, #3e0307);
62
+ --color-dds-color-gray-10: var(--dds-color-gray-10, #f2f2f2);
63
+ --color-dds-color-gray-20: var(--dds-color-gray-20, #ebebeb);
64
+ --color-dds-color-gray-30: var(--dds-color-gray-30, #dcdcdc);
65
+ --color-dds-color-gray-40: var(--dds-color-gray-40, #cecece);
66
+ --color-dds-color-gray-50: var(--dds-color-gray-50, #bfbfbf);
67
+ --color-dds-color-gray-60: var(--dds-color-gray-60, #a0a0a0);
68
+ --color-dds-color-gray-70: var(--dds-color-gray-70, #828282);
69
+ --color-dds-color-gray-80: var(--dds-color-gray-80, #616161);
70
+ --color-dds-color-gray-90: var(--dds-color-gray-90, #515151);
71
+ --color-dds-color-gray-100: var(--dds-color-gray-100, #414141);
72
+ --color-dds-color-gray-110: var(--dds-color-gray-110, #313131);
73
+ --color-dds-color-gray-120: var(--dds-color-gray-120, #212121);
74
+ --color-dds-color-black: var(--dds-color-black, #000000);
75
+ --color-dds-color-white: var(--dds-color-white, #ffffff);
76
+ --color-dds-color-blue-gray-10: var(--dds-color-blue-gray-10, #eef0f2);
77
+ --color-dds-color-blue-gray-20: var(--dds-color-blue-gray-20, #d8dde0);
78
+ --color-dds-color-blue-gray-30: var(--dds-color-blue-gray-30, #bbc1c7);
79
+ --color-dds-color-blue-gray-40: var(--dds-color-blue-gray-40, #a4acb4);
80
+ --color-dds-color-blue-gray-50: var(--dds-color-blue-gray-50, #8d98a1);
81
+ --color-dds-color-blue-gray-60: var(--dds-color-blue-gray-60, #76838e);
82
+ --color-dds-color-blue-gray-70: var(--dds-color-blue-gray-70, #636e78);
83
+ --color-dds-color-blue-gray-80: var(--dds-color-blue-gray-80, #505961);
84
+ --color-dds-color-blue-gray-90: var(--dds-color-blue-gray-90, #444b52);
85
+ --color-dds-color-blue-gray-100: var(--dds-color-blue-gray-100, #30353a);
86
+ --color-dds-color-blue-gray-110: var(--dds-color-blue-gray-110, #282c30);
87
+ --color-dds-color-blue-gray-120: var(--dds-color-blue-gray-120, #1b1e21);
88
+ --color-dds-color-dark-gray-105: var(--dds-color-dark-gray-105, #383838);
89
+ --color-dds-color-dark-gray-115: var(--dds-color-dark-gray-115, #282828);
90
+ --color-dds-color-dark-gray-125: var(--dds-color-dark-gray-125, #1a1a1a);
91
+ --color-dds-color-purple-10: var(--dds-color-purple-10, #f0ddf3);
92
+ --color-dds-color-purple-20: var(--dds-color-purple-20, #e1bbe8);
93
+ --color-dds-color-purple-30: var(--dds-color-purple-30, #d399dc);
94
+ --color-dds-color-purple-40: var(--dds-color-purple-40, #c477d0);
95
+ --color-dds-color-purple-50: var(--dds-color-purple-50, #b556c5);
96
+ --color-dds-color-purple-60: var(--dds-color-purple-60, #a03db0);
97
+ --color-dds-color-purple-70: var(--dds-color-purple-70, #81318e);
98
+ --color-dds-color-purple-80: var(--dds-color-purple-80, #6f2a7a);
99
+ --color-dds-color-purple-90: var(--dds-color-purple-90, #5c2365);
100
+ --color-dds-color-purple-100: var(--dds-color-purple-100, #4a1c51);
101
+ --color-dds-color-purple-110: var(--dds-color-purple-110, #37153d);
102
+ --color-dds-color-purple-120: var(--dds-color-purple-120, #250e29);
103
+ --radius-dds-border-radius-100: var(--dds-border-radius-100, 4px);
104
+ --radius-dds-border-radius-200: var(--dds-border-radius-200, 8px);
105
+ --radius-dds-border-radius-050: var(--dds-border-radius-050, 2px);
106
+ --border-width-dds-border-width-100: var(--dds-border-width-100, 4px);
107
+ --border-width-dds-border-width-025: var(--dds-border-width-025, 1px);
108
+ --border-width-dds-border-width-050: var(--dds-border-width-050, 2px);
109
+ --spacing-dds-space-100: var(--dds-space-100, 4px);
110
+ --spacing-dds-space-200: var(--dds-space-200, 8px);
111
+ --spacing-dds-space-300: var(--dds-space-300, 12px);
112
+ --spacing-dds-space-400: var(--dds-space-400, 16px);
113
+ --spacing-dds-space-600: var(--dds-space-600, 24px);
114
+ --spacing-dds-space-800: var(--dds-space-800, 32px);
115
+ --spacing-dds-space-1200: var(--dds-space-1200, 48px);
116
+ --spacing-dds-space-1600: var(--dds-space-1600, 64px);
117
+ --spacing-dds-space-050: var(--dds-space-050, 2px);
118
+ --font-size-dds-font-size-300: var(--dds-font-size-300, 12px);
119
+ --font-size-dds-font-size-350: var(--dds-font-size-350, 14px);
120
+ --font-size-dds-font-size-400: var(--dds-font-size-400, 16px);
121
+ --font-size-dds-font-size-500: var(--dds-font-size-500, 20px);
122
+ --font-size-dds-font-size-600: var(--dds-font-size-600, 24px);
123
+ --font-size-dds-font-size-700: var(--dds-font-size-700, 28px);
124
+ --font-size-dds-font-size-800: var(--dds-font-size-800, 32px);
125
+ --line-height-dds-font-line-height-tight: var(--dds-font-line-height-tight, 1.3);
126
+ --line-height-dds-font-line-height-normal: var(--dds-font-line-height-normal, 1.5);
127
+ --font-weight-dds-font-weight-bold: var(--dds-font-weight-bold, 700);
128
+ --font-weight-dds-font-weight-regular: var(--dds-font-weight-regular, 400);
129
+ --font-family-dds-font-family-base: var(--dds-font-family-base, Roboto);
130
+ }
package/build/css/aaf/Light/variables.css CHANGED
@@ -116,6 +116,8 @@
116
116
  --dds-space-400: 16px;
117
117
  --dds-space-600: 24px;
118
118
  --dds-space-800: 32px;
119
+ --dds-space-1200: 48px;
120
+ --dds-space-1600: 64px;
119
121
  --dds-space-050: 2px;
120
122
  --dds-font-regular-normal-300: 400 12px/1.5 Roboto;
121
123
  --dds-font-regular-normal-350: 400 14px/1.5 Roboto;
@@ -125,18 +127,13 @@
125
127
  --dds-font-regular-tight-350: 400 14px/1.3 Roboto;
126
128
  --dds-font-regular-tight-400: 400 16px/1.3 Roboto;
127
129
  --dds-font-regular-tight-500: 400 20px/1.3 Roboto;
128
- --dds-font-regular-bold-normal-300: 700 12px/1.5 Roboto;
129
- --dds-font-regular-bold-normal-350: 700 14px/1.5 Roboto;
130
- --dds-font-regular-bold-normal-400: 700 16px/1.5 Roboto;
131
- --dds-font-regular-bold-normal-500: 700 20px/1.5 Roboto;
132
- --dds-font-regular-bold-tight-300: 700 12px/1.3 Roboto;
133
- --dds-font-regular-bold-tight-350: 700 14px/1.3 Roboto;
134
- --dds-font-regular-bold-tight-400: 700 16px/1.3 Roboto;
135
- --dds-font-regular-bold-tight-500: 700 20px/1.3 Roboto;
136
130
  --dds-font-size-300: 12px;
137
131
  --dds-font-size-350: 14px;
138
132
  --dds-font-size-400: 16px;
139
133
  --dds-font-size-500: 20px;
134
+ --dds-font-size-600: 24px;
135
+ --dds-font-size-700: 28px;
136
+ --dds-font-size-800: 32px;
140
137
  --dds-font-line-height-tight: 1.3;
141
138
  --dds-font-line-height-normal: 1.5;
142
139
  --dds-font-weight-bold: 700;
@@ -150,4 +147,7 @@
150
147
  --dds-font-bold-tight-350: 700 14px/1.3 Roboto;
151
148
  --dds-font-bold-tight-400: 700 16px/1.3 Roboto;
152
149
  --dds-font-bold-tight-500: 700 20px/1.3 Roboto;
150
+ --dds-font-bold-tight-600: 700 24px/1.3 Roboto;
151
+ --dds-font-bold-tight-700: 700 28px/1.3 Roboto;
152
+ --dds-font-bold-tight-800: 700 32px/1.3 Roboto;
153
153
  }