@dynatrace/strato-design-tokens 1.1.1 → 1.1.3

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 (24) hide show
  1. package/README.md +10 -9
  2. package/borders/index.d.ts +6 -6
  3. package/borders/index.js +12 -12
  4. package/breakpoints/index.d.ts +6 -6
  5. package/breakpoints/index.js +6 -6
  6. package/breakpoints-js/index.d.ts +6 -6
  7. package/breakpoints-js/index.js +6 -6
  8. package/esm/borders/index.js +12 -12
  9. package/esm/borders/index.js.map +1 -1
  10. package/esm/breakpoints/index.js +6 -6
  11. package/esm/breakpoints/index.js.map +1 -1
  12. package/esm/breakpoints-js/index.js +6 -6
  13. package/esm/breakpoints-js/index.js.map +1 -1
  14. package/esm/variables/index.js +12 -12
  15. package/esm/variables/index.js.map +1 -1
  16. package/esm/variables-dark/index.js +12 -12
  17. package/esm/variables-dark/index.js.map +1 -1
  18. package/package.json +18 -1
  19. package/styles/variables-dark.css +12 -12
  20. package/styles/variables.css +12 -12
  21. package/variables/index.d.ts +6 -6
  22. package/variables/index.js +12 -12
  23. package/variables-dark/index.d.ts +6 -6
  24. package/variables-dark/index.js +12 -12
package/README.md CHANGED
@@ -1,19 +1,20 @@
1
- # Strato Design Tokens
1
+ # Strato design tokens
2
2
 
3
- This package includes the design tokens of the Strato Design System.
3
+ This package contains the visual properties or DNA of Strato, including its colors, typography, spacing, borders, box shadows, elevations, breakpoints, and animations. See [About Strato](https://developer.dynatrace.com/design/about-strato-design-system/) to learn about Strato's design foundations and patterns and the complete Strato React component library.
4
4
 
5
- ![A presentational overview of the Strato Design System](https://dt-cdn.net/images/strato-design-system-2158-65ccf92cee.png)
5
+ ## Documentation
6
+
7
+ Reference tables with the default values for each design token are found in [Strato design tokens](https://developer.dynatrace.com/design/design-tokens/).
6
8
 
7
- ## Install
9
+ ## Installation
8
10
 
9
11
  ```sh
10
12
  npm install @dynatrace/strato-design-tokens
11
13
  ```
12
14
 
13
- ## Documentation
14
-
15
- Check out the extensive documentation on the [Dynatrace Developer Documentation](https://developer.dynatrace.com/design/design-tokens/)
15
+ ## Releases
16
16
 
17
- ## Breaking Changes
17
+ Non-breaking changes are released every two weeks. Breaking changes are limited to twice per year.
18
18
 
19
- This package is in a preview state, which means breaking changes can occur at any time. To be able to iterate fast, **changes in this package we will not adhere to semver, thus breaking changes will not increase the major version**. The changes will be communicated in the changelog and whenever possible breaking changes will be automatically migrated with the `dt-app update` command.
19
+ - Learn about [Strato versioning](https://developer.dynatrace.com/design/strato-versioning/).
20
+ - Check the [release notes](https://developer.dynatrace.com/release-notes/design-system/design-tokens-changelog).
package/borders/index.d.ts CHANGED
@@ -30,36 +30,36 @@ declare const _default: {
30
30
  Surface: {
31
31
  /**
32
32
  * Use as the subdued border radius for surfaces.
33
- * Css custom property: --dt-borders-radius-surface-subdued. Default value: 12px.
33
+ * Css custom property: --dt-borders-radius-surface-subdued. Default value: 9px.
34
34
  */
35
35
  Subdued: string;
36
36
  /**
37
37
  * Use as the default border radius for surfaces.
38
- * Css custom property: --dt-borders-radius-surface-default. Default value: 16px.
38
+ * Css custom property: --dt-borders-radius-surface-default. Default value: 12px.
39
39
  */
40
40
  Default: string;
41
41
  };
42
42
  Container: {
43
43
  /**
44
44
  * Use as the subdued border radius for containers.
45
- * Css custom property: --dt-borders-radius-container-subdued. Default value: 8px.
45
+ * Css custom property: --dt-borders-radius-container-subdued. Default value: 6px.
46
46
  */
47
47
  Subdued: string;
48
48
  /**
49
49
  * Use as the default border radius for containers.
50
- * Css custom property: --dt-borders-radius-container-default. Default value: 12px.
50
+ * Css custom property: --dt-borders-radius-container-default. Default value: 9px.
51
51
  */
52
52
  Default: string;
53
53
  };
54
54
  Field: {
55
55
  /**
56
56
  * Use as the subdued border radius for fields.
57
- * Css custom property: --dt-borders-radius-field-subdued. Default value: 4px.
57
+ * Css custom property: --dt-borders-radius-field-subdued. Default value: 3px.
58
58
  */
59
59
  Subdued: string;
60
60
  /**
61
61
  * Use as the default border radius for fields.
62
- * Css custom property: --dt-borders-radius-field-default. Default value: 8px.
62
+ * Css custom property: --dt-borders-radius-field-default. Default value: 6px.
63
63
  */
64
64
  Default: string;
65
65
  /**
package/borders/index.js CHANGED
@@ -49,38 +49,38 @@ const Radius = {
49
49
  Surface: {
50
50
  /**
51
51
  * Use as the subdued border radius for surfaces.
52
- * Css custom property: --dt-borders-radius-surface-subdued. Default value: 12px.
52
+ * Css custom property: --dt-borders-radius-surface-subdued. Default value: 9px.
53
53
  */
54
- Subdued: "var(--dt-borders-radius-surface-subdued, 12px)",
54
+ Subdued: "var(--dt-borders-radius-surface-subdued, 9px)",
55
55
  /**
56
56
  * Use as the default border radius for surfaces.
57
- * Css custom property: --dt-borders-radius-surface-default. Default value: 16px.
57
+ * Css custom property: --dt-borders-radius-surface-default. Default value: 12px.
58
58
  */
59
- Default: "var(--dt-borders-radius-surface-default, 16px)"
59
+ Default: "var(--dt-borders-radius-surface-default, 12px)"
60
60
  },
61
61
  Container: {
62
62
  /**
63
63
  * Use as the subdued border radius for containers.
64
- * Css custom property: --dt-borders-radius-container-subdued. Default value: 8px.
64
+ * Css custom property: --dt-borders-radius-container-subdued. Default value: 6px.
65
65
  */
66
- Subdued: "var(--dt-borders-radius-container-subdued, 8px)",
66
+ Subdued: "var(--dt-borders-radius-container-subdued, 6px)",
67
67
  /**
68
68
  * Use as the default border radius for containers.
69
- * Css custom property: --dt-borders-radius-container-default. Default value: 12px.
69
+ * Css custom property: --dt-borders-radius-container-default. Default value: 9px.
70
70
  */
71
- Default: "var(--dt-borders-radius-container-default, 12px)"
71
+ Default: "var(--dt-borders-radius-container-default, 9px)"
72
72
  },
73
73
  Field: {
74
74
  /**
75
75
  * Use as the subdued border radius for fields.
76
- * Css custom property: --dt-borders-radius-field-subdued. Default value: 4px.
76
+ * Css custom property: --dt-borders-radius-field-subdued. Default value: 3px.
77
77
  */
78
- Subdued: "var(--dt-borders-radius-field-subdued, 4px)",
78
+ Subdued: "var(--dt-borders-radius-field-subdued, 3px)",
79
79
  /**
80
80
  * Use as the default border radius for fields.
81
- * Css custom property: --dt-borders-radius-field-default. Default value: 8px.
81
+ * Css custom property: --dt-borders-radius-field-default. Default value: 6px.
82
82
  */
83
- Default: "var(--dt-borders-radius-field-default, 8px)",
83
+ Default: "var(--dt-borders-radius-field-default, 6px)",
84
84
  /**
85
85
  * Use for rounded or pill-like shapes.
86
86
  * Css custom property: --dt-borders-radius-field-emphasized. Default value: 9999px.
package/breakpoints/index.d.ts CHANGED
@@ -4,34 +4,34 @@
4
4
  declare const _default: {
5
5
  Max: {
6
6
  /**
7
- * Use to constrain screen sizes that are 640px wide or less.
7
+ * Use with `@media` `max-width` to apply styles to mobile-sized screens.
8
8
  * Css custom property: --dt-breakpoints-max-mobile. Default value: 640px.
9
9
  */
10
10
  Mobile: string;
11
11
  /**
12
- * Use to constrain screen sizes that are 641px wide or more.
12
+ * Use with `@media` `max-width` to apply styles to tablets and smaller screens.
13
13
  * Css custom property: --dt-breakpoints-max-tablet. Default value: 960px.
14
14
  */
15
15
  Tablet: string;
16
16
  /**
17
- * Use to constrain screen sizes that are 960px wide or less.
17
+ * Use with `@media` `max-width` to apply styles to desktops and smaller screens.
18
18
  * Css custom property: --dt-breakpoints-max-desktop. Default value: 1920px.
19
19
  */
20
20
  Desktop: string;
21
21
  };
22
22
  Min: {
23
23
  /**
24
- * Use to constrain screen sizes that are 961px wide or more.
24
+ * Use this with `@media` `min-width`, to apply styles to tablet and wider screen sizes.
25
25
  * Css custom property: --dt-breakpoints-min-tablet. Default value: 641px.
26
26
  */
27
27
  Tablet: string;
28
28
  /**
29
- * Use to constrain screen sizes that are 1920 wide or less.
29
+ * Use this with `@media` `min-width`, to apply styles to desktop and wider screen sizes.
30
30
  * Css custom property: --dt-breakpoints-min-desktop. Default value: 961px.
31
31
  */
32
32
  Desktop: string;
33
33
  /**
34
- * Use to constrain screen sizes that are 1921px wide or more.
34
+ * Use this with `@media` `min-width`, to apply styles to widescreen desktop and wider screen sizes.
35
35
  * Css custom property: --dt-breakpoints-min-widescreen. Default value: 1921px.
36
36
  */
37
37
  Widescreen: string;
package/breakpoints/index.js CHANGED
@@ -23,34 +23,34 @@ __export(breakpoints_exports, {
23
23
  module.exports = __toCommonJS(breakpoints_exports);
24
24
  const Max = {
25
25
  /**
26
- * Use to constrain screen sizes that are 640px wide or less.
26
+ * Use with `@media` `max-width` to apply styles to mobile-sized screens.
27
27
  * Css custom property: --dt-breakpoints-max-mobile. Default value: 640px.
28
28
  */
29
29
  Mobile: "var(--dt-breakpoints-max-mobile, 640px)",
30
30
  /**
31
- * Use to constrain screen sizes that are 641px wide or more.
31
+ * Use with `@media` `max-width` to apply styles to tablets and smaller screens.
32
32
  * Css custom property: --dt-breakpoints-max-tablet. Default value: 960px.
33
33
  */
34
34
  Tablet: "var(--dt-breakpoints-max-tablet, 960px)",
35
35
  /**
36
- * Use to constrain screen sizes that are 960px wide or less.
36
+ * Use with `@media` `max-width` to apply styles to desktops and smaller screens.
37
37
  * Css custom property: --dt-breakpoints-max-desktop. Default value: 1920px.
38
38
  */
39
39
  Desktop: "var(--dt-breakpoints-max-desktop, 1920px)"
40
40
  };
41
41
  const Min = {
42
42
  /**
43
- * Use to constrain screen sizes that are 961px wide or more.
43
+ * Use this with `@media` `min-width`, to apply styles to tablet and wider screen sizes.
44
44
  * Css custom property: --dt-breakpoints-min-tablet. Default value: 641px.
45
45
  */
46
46
  Tablet: "var(--dt-breakpoints-min-tablet, 641px)",
47
47
  /**
48
- * Use to constrain screen sizes that are 1920 wide or less.
48
+ * Use this with `@media` `min-width`, to apply styles to desktop and wider screen sizes.
49
49
  * Css custom property: --dt-breakpoints-min-desktop. Default value: 961px.
50
50
  */
51
51
  Desktop: "var(--dt-breakpoints-min-desktop, 961px)",
52
52
  /**
53
- * Use to constrain screen sizes that are 1921px wide or more.
53
+ * Use this with `@media` `min-width`, to apply styles to widescreen desktop and wider screen sizes.
54
54
  * Css custom property: --dt-breakpoints-min-widescreen. Default value: 1921px.
55
55
  */
56
56
  Widescreen: "var(--dt-breakpoints-min-widescreen, 1921px)"
package/breakpoints-js/index.d.ts CHANGED
@@ -4,34 +4,34 @@
4
4
  declare const _default: {
5
5
  Max: {
6
6
  /**
7
- * Use to constrain screen sizes that are 640px wide or less.
7
+ * Use with `@media` `max-width` to apply styles to mobile-sized screens.
8
8
  * Value: 640.
9
9
  */
10
10
  Mobile: number;
11
11
  /**
12
- * Use to constrain screen sizes that are 641px wide or more.
12
+ * Use with `@media` `max-width` to apply styles to tablets and smaller screens.
13
13
  * Value: 960.
14
14
  */
15
15
  Tablet: number;
16
16
  /**
17
- * Use to constrain screen sizes that are 960px wide or less.
17
+ * Use with `@media` `max-width` to apply styles to desktops and smaller screens.
18
18
  * Value: 1920.
19
19
  */
20
20
  Desktop: number;
21
21
  };
22
22
  Min: {
23
23
  /**
24
- * Use to constrain screen sizes that are 961px wide or more.
24
+ * Use this with `@media` `min-width`, to apply styles to tablet and wider screen sizes.
25
25
  * Value: 641.
26
26
  */
27
27
  Tablet: number;
28
28
  /**
29
- * Use to constrain screen sizes that are 1920 wide or less.
29
+ * Use this with `@media` `min-width`, to apply styles to desktop and wider screen sizes.
30
30
  * Value: 961.
31
31
  */
32
32
  Desktop: number;
33
33
  /**
34
- * Use to constrain screen sizes that are 1921px wide or more.
34
+ * Use this with `@media` `min-width`, to apply styles to widescreen desktop and wider screen sizes.
35
35
  * Value: 1921.
36
36
  */
37
37
  Widescreen: number;
package/breakpoints-js/index.js CHANGED
@@ -23,34 +23,34 @@ __export(breakpoints_js_exports, {
23
23
  module.exports = __toCommonJS(breakpoints_js_exports);
24
24
  const Max = {
25
25
  /**
26
- * Use to constrain screen sizes that are 640px wide or less.
26
+ * Use with `@media` `max-width` to apply styles to mobile-sized screens.
27
27
  * Value: 640.
28
28
  */
29
29
  Mobile: 640,
30
30
  /**
31
- * Use to constrain screen sizes that are 641px wide or more.
31
+ * Use with `@media` `max-width` to apply styles to tablets and smaller screens.
32
32
  * Value: 960.
33
33
  */
34
34
  Tablet: 960,
35
35
  /**
36
- * Use to constrain screen sizes that are 960px wide or less.
36
+ * Use with `@media` `max-width` to apply styles to desktops and smaller screens.
37
37
  * Value: 1920.
38
38
  */
39
39
  Desktop: 1920
40
40
  };
41
41
  const Min = {
42
42
  /**
43
- * Use to constrain screen sizes that are 961px wide or more.
43
+ * Use this with `@media` `min-width`, to apply styles to tablet and wider screen sizes.
44
44
  * Value: 641.
45
45
  */
46
46
  Tablet: 641,
47
47
  /**
48
- * Use to constrain screen sizes that are 1920 wide or less.
48
+ * Use this with `@media` `min-width`, to apply styles to desktop and wider screen sizes.
49
49
  * Value: 961.
50
50
  */
51
51
  Desktop: 961,
52
52
  /**
53
- * Use to constrain screen sizes that are 1921px wide or more.
53
+ * Use this with `@media` `min-width`, to apply styles to widescreen desktop and wider screen sizes.
54
54
  * Value: 1921.
55
55
  */
56
56
  Widescreen: 1921
package/esm/borders/index.js CHANGED
@@ -26,38 +26,38 @@ const Radius = {
26
26
  Surface: {
27
27
  /**
28
28
  * Use as the subdued border radius for surfaces.
29
- * Css custom property: --dt-borders-radius-surface-subdued. Default value: 12px.
29
+ * Css custom property: --dt-borders-radius-surface-subdued. Default value: 9px.
30
30
  */
31
- Subdued: "var(--dt-borders-radius-surface-subdued, 12px)",
31
+ Subdued: "var(--dt-borders-radius-surface-subdued, 9px)",
32
32
  /**
33
33
  * Use as the default border radius for surfaces.
34
- * Css custom property: --dt-borders-radius-surface-default. Default value: 16px.
34
+ * Css custom property: --dt-borders-radius-surface-default. Default value: 12px.
35
35
  */
36
- Default: "var(--dt-borders-radius-surface-default, 16px)"
36
+ Default: "var(--dt-borders-radius-surface-default, 12px)"
37
37
  },
38
38
  Container: {
39
39
  /**
40
40
  * Use as the subdued border radius for containers.
41
- * Css custom property: --dt-borders-radius-container-subdued. Default value: 8px.
41
+ * Css custom property: --dt-borders-radius-container-subdued. Default value: 6px.
42
42
  */
43
- Subdued: "var(--dt-borders-radius-container-subdued, 8px)",
43
+ Subdued: "var(--dt-borders-radius-container-subdued, 6px)",
44
44
  /**
45
45
  * Use as the default border radius for containers.
46
- * Css custom property: --dt-borders-radius-container-default. Default value: 12px.
46
+ * Css custom property: --dt-borders-radius-container-default. Default value: 9px.
47
47
  */
48
- Default: "var(--dt-borders-radius-container-default, 12px)"
48
+ Default: "var(--dt-borders-radius-container-default, 9px)"
49
49
  },
50
50
  Field: {
51
51
  /**
52
52
  * Use as the subdued border radius for fields.
53
- * Css custom property: --dt-borders-radius-field-subdued. Default value: 4px.
53
+ * Css custom property: --dt-borders-radius-field-subdued. Default value: 3px.
54
54
  */
55
- Subdued: "var(--dt-borders-radius-field-subdued, 4px)",
55
+ Subdued: "var(--dt-borders-radius-field-subdued, 3px)",
56
56
  /**
57
57
  * Use as the default border radius for fields.
58
- * Css custom property: --dt-borders-radius-field-default. Default value: 8px.
58
+ * Css custom property: --dt-borders-radius-field-default. Default value: 6px.
59
59
  */
60
- Default: "var(--dt-borders-radius-field-default, 8px)",
60
+ Default: "var(--dt-borders-radius-field-default, 6px)",
61
61
  /**
62
62
  * Use for rounded or pill-like shapes.
63
63
  * Css custom property: --dt-borders-radius-field-emphasized. Default value: 9999px.
package/esm/borders/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../generated/borders/index.ts"],
4
- "sourcesContent": ["/**\n * Generated file, do not edit directly!\n */\n\n/** Borders provide style, width, and radius to the edges of an element. */\n\nconst Style = {\n /**\n * Use as the default border style.\n * Css custom property: --dt-borders-style-default. Default value: solid.\n */\n Default: 'var(--dt-borders-style-default, solid)',\n /**\n * Use to indicate interactive text.\n * Css custom property: --dt-borders-style-dashed. Default value: dashed.\n */\n Dashed: 'var(--dt-borders-style-dashed, dashed)',\n};\nconst Width = {\n /**\n * Use as the default border width.\n * Css custom property: --dt-borders-width-default. Default value: 1px.\n */\n Default: 'var(--dt-borders-width-default, 1px)',\n /**\n * Use to emphasize borders. This can be useful to clearly separate content.\n * Css custom property: --dt-borders-width-emphasized. Default value: 2px.\n */\n Emphasized: 'var(--dt-borders-width-emphasized, 2px)',\n};\nconst Radius = {\n Surface: {\n /**\n * Use as the subdued border radius for surfaces.\n * Css custom property: --dt-borders-radius-surface-subdued. Default value: 12px.\n */\n Subdued: 'var(--dt-borders-radius-surface-subdued, 12px)',\n /**\n * Use as the default border radius for surfaces.\n * Css custom property: --dt-borders-radius-surface-default. Default value: 16px.\n */\n Default: 'var(--dt-borders-radius-surface-default, 16px)',\n },\n Container: {\n /**\n * Use as the subdued border radius for containers.\n * Css custom property: --dt-borders-radius-container-subdued. Default value: 8px.\n */\n Subdued: 'var(--dt-borders-radius-container-subdued, 8px)',\n /**\n * Use as the default border radius for containers.\n * Css custom property: --dt-borders-radius-container-default. Default value: 12px.\n */\n Default: 'var(--dt-borders-radius-container-default, 12px)',\n },\n Field: {\n /**\n * Use as the subdued border radius for fields.\n * Css custom property: --dt-borders-radius-field-subdued. Default value: 4px.\n */\n Subdued: 'var(--dt-borders-radius-field-subdued, 4px)',\n /**\n * Use as the default border radius for fields.\n * Css custom property: --dt-borders-radius-field-default. Default value: 8px.\n */\n Default: 'var(--dt-borders-radius-field-default, 8px)',\n /**\n * Use for rounded or pill-like shapes.\n * Css custom property: --dt-borders-radius-field-emphasized. Default value: 9999px.\n */\n Emphasized: 'var(--dt-borders-radius-field-emphasized, 9999px)',\n },\n};\nexport default {\n Style,\n Width,\n Radius,\n};\n"],
4
+ "sourcesContent": ["/**\n * Generated file, do not edit directly!\n */\n\n/** Borders provide style, width, and radius to the edges of an element. */\n\nconst Style = {\n /**\n * Use as the default border style.\n * Css custom property: --dt-borders-style-default. Default value: solid.\n */\n Default: 'var(--dt-borders-style-default, solid)',\n /**\n * Use to indicate interactive text.\n * Css custom property: --dt-borders-style-dashed. Default value: dashed.\n */\n Dashed: 'var(--dt-borders-style-dashed, dashed)',\n};\nconst Width = {\n /**\n * Use as the default border width.\n * Css custom property: --dt-borders-width-default. Default value: 1px.\n */\n Default: 'var(--dt-borders-width-default, 1px)',\n /**\n * Use to emphasize borders. This can be useful to clearly separate content.\n * Css custom property: --dt-borders-width-emphasized. Default value: 2px.\n */\n Emphasized: 'var(--dt-borders-width-emphasized, 2px)',\n};\nconst Radius = {\n Surface: {\n /**\n * Use as the subdued border radius for surfaces.\n * Css custom property: --dt-borders-radius-surface-subdued. Default value: 9px.\n */\n Subdued: 'var(--dt-borders-radius-surface-subdued, 9px)',\n /**\n * Use as the default border radius for surfaces.\n * Css custom property: --dt-borders-radius-surface-default. Default value: 12px.\n */\n Default: 'var(--dt-borders-radius-surface-default, 12px)',\n },\n Container: {\n /**\n * Use as the subdued border radius for containers.\n * Css custom property: --dt-borders-radius-container-subdued. Default value: 6px.\n */\n Subdued: 'var(--dt-borders-radius-container-subdued, 6px)',\n /**\n * Use as the default border radius for containers.\n * Css custom property: --dt-borders-radius-container-default. Default value: 9px.\n */\n Default: 'var(--dt-borders-radius-container-default, 9px)',\n },\n Field: {\n /**\n * Use as the subdued border radius for fields.\n * Css custom property: --dt-borders-radius-field-subdued. Default value: 3px.\n */\n Subdued: 'var(--dt-borders-radius-field-subdued, 3px)',\n /**\n * Use as the default border radius for fields.\n * Css custom property: --dt-borders-radius-field-default. Default value: 6px.\n */\n Default: 'var(--dt-borders-radius-field-default, 6px)',\n /**\n * Use for rounded or pill-like shapes.\n * Css custom property: --dt-borders-radius-field-emphasized. Default value: 9999px.\n */\n Emphasized: 'var(--dt-borders-radius-field-emphasized, 9999px)',\n },\n};\nexport default {\n Style,\n Width,\n Radius,\n};\n"],
5
5
  "mappings": "AAMA,MAAM,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,EAKZ,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,EAKT,QAAQ;AACV;AACA,MAAM,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,EAKZ,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,EAKT,YAAY;AACd;AACA,MAAM,SAAS;AAAA,EACb,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,IAKP,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,IAKT,SAAS;AAAA,EACX;AAAA,EACA,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,IAKT,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,IAKT,SAAS;AAAA,EACX;AAAA,EACA,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,IAKT,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,IAKT,YAAY;AAAA,EACd;AACF;AACA,IAAO,kBAAQ;AAAA,EACb;AAAA,EACA;AAAA,EACA;AACF;",
6
6
  "names": []
7
7
  }
package/esm/breakpoints/index.js CHANGED
@@ -1,33 +1,33 @@
1
1
  const Max = {
2
2
  /**
3
- * Use to constrain screen sizes that are 640px wide or less.
3
+ * Use with `@media` `max-width` to apply styles to mobile-sized screens.
4
4
  * Css custom property: --dt-breakpoints-max-mobile. Default value: 640px.
5
5
  */
6
6
  Mobile: "var(--dt-breakpoints-max-mobile, 640px)",
7
7
  /**
8
- * Use to constrain screen sizes that are 641px wide or more.
8
+ * Use with `@media` `max-width` to apply styles to tablets and smaller screens.
9
9
  * Css custom property: --dt-breakpoints-max-tablet. Default value: 960px.
10
10
  */
11
11
  Tablet: "var(--dt-breakpoints-max-tablet, 960px)",
12
12
  /**
13
- * Use to constrain screen sizes that are 960px wide or less.
13
+ * Use with `@media` `max-width` to apply styles to desktops and smaller screens.
14
14
  * Css custom property: --dt-breakpoints-max-desktop. Default value: 1920px.
15
15
  */
16
16
  Desktop: "var(--dt-breakpoints-max-desktop, 1920px)"
17
17
  };
18
18
  const Min = {
19
19
  /**
20
- * Use to constrain screen sizes that are 961px wide or more.
20
+ * Use this with `@media` `min-width`, to apply styles to tablet and wider screen sizes.
21
21
  * Css custom property: --dt-breakpoints-min-tablet. Default value: 641px.
22
22
  */
23
23
  Tablet: "var(--dt-breakpoints-min-tablet, 641px)",
24
24
  /**
25
- * Use to constrain screen sizes that are 1920 wide or less.
25
+ * Use this with `@media` `min-width`, to apply styles to desktop and wider screen sizes.
26
26
  * Css custom property: --dt-breakpoints-min-desktop. Default value: 961px.
27
27
  */
28
28
  Desktop: "var(--dt-breakpoints-min-desktop, 961px)",
29
29
  /**
30
- * Use to constrain screen sizes that are 1921px wide or more.
30
+ * Use this with `@media` `min-width`, to apply styles to widescreen desktop and wider screen sizes.
31
31
  * Css custom property: --dt-breakpoints-min-widescreen. Default value: 1921px.
32
32
  */
33
33
  Widescreen: "var(--dt-breakpoints-min-widescreen, 1921px)"
package/esm/breakpoints/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../generated/breakpoints/index.ts"],
4
- "sourcesContent": ["/**\n * Generated file, do not edit directly!\n */\n\n/** Breakpoints are used to adjust the layout and appearance of elements in the interface based on different screen sizes. */\n\nconst Max = {\n /**\n * Use to constrain screen sizes that are 640px wide or less.\n * Css custom property: --dt-breakpoints-max-mobile. Default value: 640px.\n */\n Mobile: 'var(--dt-breakpoints-max-mobile, 640px)',\n /**\n * Use to constrain screen sizes that are 641px wide or more.\n * Css custom property: --dt-breakpoints-max-tablet. Default value: 960px.\n */\n Tablet: 'var(--dt-breakpoints-max-tablet, 960px)',\n /**\n * Use to constrain screen sizes that are 960px wide or less.\n * Css custom property: --dt-breakpoints-max-desktop. Default value: 1920px.\n */\n Desktop: 'var(--dt-breakpoints-max-desktop, 1920px)',\n};\nconst Min = {\n /**\n * Use to constrain screen sizes that are 961px wide or more.\n * Css custom property: --dt-breakpoints-min-tablet. Default value: 641px.\n */\n Tablet: 'var(--dt-breakpoints-min-tablet, 641px)',\n /**\n * Use to constrain screen sizes that are 1920 wide or less.\n * Css custom property: --dt-breakpoints-min-desktop. Default value: 961px.\n */\n Desktop: 'var(--dt-breakpoints-min-desktop, 961px)',\n /**\n * Use to constrain screen sizes that are 1921px wide or more.\n * Css custom property: --dt-breakpoints-min-widescreen. Default value: 1921px.\n */\n Widescreen: 'var(--dt-breakpoints-min-widescreen, 1921px)',\n};\nexport default {\n Max,\n Min,\n};\n"],
4
+ "sourcesContent": ["/**\n * Generated file, do not edit directly!\n */\n\n/** Breakpoints are used to adjust the layout and appearance of elements in the interface based on different screen sizes. */\n\nconst Max = {\n /**\n * Use with `@media` `max-width` to apply styles to mobile-sized screens.\n * Css custom property: --dt-breakpoints-max-mobile. Default value: 640px.\n */\n Mobile: 'var(--dt-breakpoints-max-mobile, 640px)',\n /**\n * Use with `@media` `max-width` to apply styles to tablets and smaller screens.\n * Css custom property: --dt-breakpoints-max-tablet. Default value: 960px.\n */\n Tablet: 'var(--dt-breakpoints-max-tablet, 960px)',\n /**\n * Use with `@media` `max-width` to apply styles to desktops and smaller screens.\n * Css custom property: --dt-breakpoints-max-desktop. Default value: 1920px.\n */\n Desktop: 'var(--dt-breakpoints-max-desktop, 1920px)',\n};\nconst Min = {\n /**\n * Use this with `@media` `min-width`, to apply styles to tablet and wider screen sizes.\n * Css custom property: --dt-breakpoints-min-tablet. Default value: 641px.\n */\n Tablet: 'var(--dt-breakpoints-min-tablet, 641px)',\n /**\n * Use this with `@media` `min-width`, to apply styles to desktop and wider screen sizes.\n * Css custom property: --dt-breakpoints-min-desktop. Default value: 961px.\n */\n Desktop: 'var(--dt-breakpoints-min-desktop, 961px)',\n /**\n * Use this with `@media` `min-width`, to apply styles to widescreen desktop and wider screen sizes.\n * Css custom property: --dt-breakpoints-min-widescreen. Default value: 1921px.\n */\n Widescreen: 'var(--dt-breakpoints-min-widescreen, 1921px)',\n};\nexport default {\n Max,\n Min,\n};\n"],
5
5
  "mappings": "AAMA,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,EAKV,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,EAKR,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,EAKR,SAAS;AACX;AACA,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,EAKV,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,EAKR,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,EAKT,YAAY;AACd;AACA,IAAO,sBAAQ;AAAA,EACb;AAAA,EACA;AACF;",
6
6
  "names": []
7
7
  }
package/esm/breakpoints-js/index.js CHANGED
@@ -1,33 +1,33 @@
1
1
  const Max = {
2
2
  /**
3
- * Use to constrain screen sizes that are 640px wide or less.
3
+ * Use with `@media` `max-width` to apply styles to mobile-sized screens.
4
4
  * Value: 640.
5
5
  */
6
6
  Mobile: 640,
7
7
  /**
8
- * Use to constrain screen sizes that are 641px wide or more.
8
+ * Use with `@media` `max-width` to apply styles to tablets and smaller screens.
9
9
  * Value: 960.
10
10
  */
11
11
  Tablet: 960,
12
12
  /**
13
- * Use to constrain screen sizes that are 960px wide or less.
13
+ * Use with `@media` `max-width` to apply styles to desktops and smaller screens.
14
14
  * Value: 1920.
15
15
  */
16
16
  Desktop: 1920
17
17
  };
18
18
  const Min = {
19
19
  /**
20
- * Use to constrain screen sizes that are 961px wide or more.
20
+ * Use this with `@media` `min-width`, to apply styles to tablet and wider screen sizes.
21
21
  * Value: 641.
22
22
  */
23
23
  Tablet: 641,
24
24
  /**
25
- * Use to constrain screen sizes that are 1920 wide or less.
25
+ * Use this with `@media` `min-width`, to apply styles to desktop and wider screen sizes.
26
26
  * Value: 961.
27
27
  */
28
28
  Desktop: 961,
29
29
  /**
30
- * Use to constrain screen sizes that are 1921px wide or more.
30
+ * Use this with `@media` `min-width`, to apply styles to widescreen desktop and wider screen sizes.
31
31
  * Value: 1921.
32
32
  */
33
33
  Widescreen: 1921
package/esm/breakpoints-js/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../generated/breakpoints-js/index.ts"],
4
- "sourcesContent": ["/**\n * Generated file, do not edit directly!\n */\n\n/** Breakpoints are used to adjust the layout and appearance of elements in the interface based on different screen sizes. */\n\nconst Max = {\n /**\n * Use to constrain screen sizes that are 640px wide or less.\n * Value: 640.\n */\n Mobile: 640,\n /**\n * Use to constrain screen sizes that are 641px wide or more.\n * Value: 960.\n */\n Tablet: 960,\n /**\n * Use to constrain screen sizes that are 960px wide or less.\n * Value: 1920.\n */\n Desktop: 1920,\n};\nconst Min = {\n /**\n * Use to constrain screen sizes that are 961px wide or more.\n * Value: 641.\n */\n Tablet: 641,\n /**\n * Use to constrain screen sizes that are 1920 wide or less.\n * Value: 961.\n */\n Desktop: 961,\n /**\n * Use to constrain screen sizes that are 1921px wide or more.\n * Value: 1921.\n */\n Widescreen: 1921,\n};\nexport default {\n Max,\n Min,\n};\n"],
4
+ "sourcesContent": ["/**\n * Generated file, do not edit directly!\n */\n\n/** Breakpoints are used to adjust the layout and appearance of elements in the interface based on different screen sizes. */\n\nconst Max = {\n /**\n * Use with `@media` `max-width` to apply styles to mobile-sized screens.\n * Value: 640.\n */\n Mobile: 640,\n /**\n * Use with `@media` `max-width` to apply styles to tablets and smaller screens.\n * Value: 960.\n */\n Tablet: 960,\n /**\n * Use with `@media` `max-width` to apply styles to desktops and smaller screens.\n * Value: 1920.\n */\n Desktop: 1920,\n};\nconst Min = {\n /**\n * Use this with `@media` `min-width`, to apply styles to tablet and wider screen sizes.\n * Value: 641.\n */\n Tablet: 641,\n /**\n * Use this with `@media` `min-width`, to apply styles to desktop and wider screen sizes.\n * Value: 961.\n */\n Desktop: 961,\n /**\n * Use this with `@media` `min-width`, to apply styles to widescreen desktop and wider screen sizes.\n * Value: 1921.\n */\n Widescreen: 1921,\n};\nexport default {\n Max,\n Min,\n};\n"],
5
5
  "mappings": "AAMA,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,EAKV,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,EAKR,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,EAKR,SAAS;AACX;AACA,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,EAKV,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,EAKR,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,EAKT,YAAY;AACd;AACA,IAAO,yBAAQ;AAAA,EACb;AAAA,EACA;AACF;",
6
6
  "names": []
7
7
  }
package/esm/variables/index.js CHANGED
@@ -8,17 +8,17 @@ const customPropertiesUnified = {
8
8
  /** Use to emphasize borders. This can be useful to clearly separate content. */
9
9
  "--dt-borders-width-emphasized": "2px",
10
10
  /** Use as the subdued border radius for surfaces. */
11
- "--dt-borders-radius-surface-subdued": "12px",
11
+ "--dt-borders-radius-surface-subdued": "9px",
12
12
  /** Use as the default border radius for surfaces. */
13
- "--dt-borders-radius-surface-default": "16px",
13
+ "--dt-borders-radius-surface-default": "12px",
14
14
  /** Use as the subdued border radius for containers. */
15
- "--dt-borders-radius-container-subdued": "8px",
15
+ "--dt-borders-radius-container-subdued": "6px",
16
16
  /** Use as the default border radius for containers. */
17
- "--dt-borders-radius-container-default": "12px",
17
+ "--dt-borders-radius-container-default": "9px",
18
18
  /** Use as the subdued border radius for fields. */
19
- "--dt-borders-radius-field-subdued": "4px",
19
+ "--dt-borders-radius-field-subdued": "3px",
20
20
  /** Use as the default border radius for fields. */
21
- "--dt-borders-radius-field-default": "8px",
21
+ "--dt-borders-radius-field-default": "6px",
22
22
  /** Use for rounded or pill-like shapes. */
23
23
  "--dt-borders-radius-field-emphasized": "9999px",
24
24
  /** Use as the default level of elevation. */
@@ -45,17 +45,17 @@ const customPropertiesUnified = {
45
45
  "--dt-box-shadows-surface-floating-active": "0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29",
46
46
  /** Use when moving a floating surface, on drag-and-drop interaction. */
47
47
  "--dt-box-shadows-surface-floating-drag": "0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 7px 17px -2px #2d2e4e52",
48
- /** Use to constrain screen sizes that are 640px wide or less. */
48
+ /** Use with `@media` `max-width` to apply styles to mobile-sized screens. */
49
49
  "--dt-breakpoints-max-mobile": "640px",
50
- /** Use to constrain screen sizes that are 641px wide or more. */
50
+ /** Use with `@media` `max-width` to apply styles to tablets and smaller screens. */
51
51
  "--dt-breakpoints-max-tablet": "960px",
52
- /** Use to constrain screen sizes that are 960px wide or less. */
52
+ /** Use with `@media` `max-width` to apply styles to desktops and smaller screens. */
53
53
  "--dt-breakpoints-max-desktop": "1920px",
54
- /** Use to constrain screen sizes that are 961px wide or more. */
54
+ /** Use this with `@media` `min-width`, to apply styles to tablet and wider screen sizes. */
55
55
  "--dt-breakpoints-min-tablet": "641px",
56
- /** Use to constrain screen sizes that are 1920 wide or less. */
56
+ /** Use this with `@media` `min-width`, to apply styles to desktop and wider screen sizes. */
57
57
  "--dt-breakpoints-min-desktop": "961px",
58
- /** Use to constrain screen sizes that are 1921px wide or more. */
58
+ /** Use this with `@media` `min-width`, to apply styles to widescreen desktop and wider screen sizes. */
59
59
  "--dt-breakpoints-min-widescreen": "1921px",
60
60
  "--dt-colors-theme-foreground-10": "#2d2e4e",
61
61
  "--dt-colors-theme-foreground-20": "#fff",