@dynatrace/strato-design-tokens 1.1.2 → 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 (23) hide show
  1. package/borders/index.d.ts +6 -6
  2. package/borders/index.js +12 -12
  3. package/breakpoints/index.d.ts +6 -6
  4. package/breakpoints/index.js +6 -6
  5. package/breakpoints-js/index.d.ts +6 -6
  6. package/breakpoints-js/index.js +6 -6
  7. package/esm/borders/index.js +12 -12
  8. package/esm/borders/index.js.map +1 -1
  9. package/esm/breakpoints/index.js +6 -6
  10. package/esm/breakpoints/index.js.map +1 -1
  11. package/esm/breakpoints-js/index.js +6 -6
  12. package/esm/breakpoints-js/index.js.map +1 -1
  13. package/esm/variables/index.js +12 -12
  14. package/esm/variables/index.js.map +1 -1
  15. package/esm/variables-dark/index.js +12 -12
  16. package/esm/variables-dark/index.js.map +1 -1
  17. package/package.json +1 -1
  18. package/styles/variables-dark.css +12 -12
  19. package/styles/variables.css +12 -12
  20. package/variables/index.d.ts +6 -6
  21. package/variables/index.js +12 -12
  22. package/variables-dark/index.d.ts +6 -6
  23. package/variables-dark/index.js +12 -12
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",