@dialpad/dialtone-tokens 1.0.1 → 1.1.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.
- package/README.md +35 -2
- package/dist/android/colors.xml +100 -0
- package/dist/android/dimens.xml +91 -0
- package/dist/css/variables.css +323 -0
- package/dist/ios/dialtone.swift +329 -0
- package/dist/less/variables.less +320 -0
- package/dist/tokens.json +318 -0
- package/package.json +5 -3
- package/dist/less/_variables.less +0 -239
package/README.md
CHANGED
|
@@ -4,9 +4,42 @@
|
|
|
4
4
|
|
|
5
5
|
Design tokens for Dialpad's design system Dialtone and everything related to building and publishing them.
|
|
6
6
|
|
|
7
|
-
Design tokens are all the defined values that are part of the design system, such as color, spacing, typography and more. The goal is to store design tokens as JSON and output and publish them to many different formats (CSS, LESS, Android, iOS, etc) upon build.
|
|
7
|
+
Design tokens are all the defined values that are part of the design system, such as color, spacing, typography, and more. The goal is to store design tokens as JSON and output and publish them to many different formats (CSS, LESS, Android, iOS, etc) upon build.
|
|
8
8
|
|
|
9
|
-
###
|
|
9
|
+
### Usage
|
|
10
|
+
|
|
11
|
+
To use Dialtone Tokens in your project:
|
|
12
|
+
|
|
13
|
+
```
|
|
14
|
+
npm install @dialpad/dialtone-tokens
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
#### CSS
|
|
18
|
+
|
|
19
|
+
```
|
|
20
|
+
@import "node_modules/@dialpad/dialtone/css/variables.css";
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
#### LESS
|
|
24
|
+
|
|
25
|
+
```
|
|
26
|
+
@import "node_modules/@dialpad/dialtone/less/variables.less";
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
#### iOS (swift)
|
|
30
|
+
|
|
31
|
+
```
|
|
32
|
+
TBD
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
#### Android
|
|
36
|
+
|
|
37
|
+
```
|
|
38
|
+
TBD
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
### Quick Start for Contributors
|
|
10
43
|
|
|
11
44
|
1. clone repo
|
|
12
45
|
2. `npm install`
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8"?>
|
|
2
|
+
|
|
3
|
+
<!--
|
|
4
|
+
Do not edit directly
|
|
5
|
+
Generated on Thu, 22 Sep 2022 21:05:34 GMT
|
|
6
|
+
-->
|
|
7
|
+
<resources>
|
|
8
|
+
<color name="dt_button_color_background_default">transparent</color>
|
|
9
|
+
<color name="dt_button_color_background_primary">#7C52FF</color>
|
|
10
|
+
<color name="dt_button_color_background_danger">#FF2E2E</color>
|
|
11
|
+
<color name="dt_button_color_text_default">#7C52FF</color>
|
|
12
|
+
<color name="dt_button_color_text_primary">#fff</color>
|
|
13
|
+
<color name="dt_button_color_text_danger">#fff</color>
|
|
14
|
+
<color name="dt_color_text_primary">#ff000000</color>
|
|
15
|
+
<color name="dt_color_text_secondary">#ff3a3a3a</color>
|
|
16
|
+
<color name="dt_color_text_tertiary">#ff555555</color>
|
|
17
|
+
<color name="dt_color_text_muted">#80222222</color>
|
|
18
|
+
<color name="dt_color_text_placeholder">#ff808080</color>
|
|
19
|
+
<color name="dt_color_text_disabled">#ff808080</color>
|
|
20
|
+
<color name="dt_color_text_error">#ffa41111</color>
|
|
21
|
+
<color name="dt_color_text_success">#ff00671d</color>
|
|
22
|
+
<color name="dt_color_text_warning">#ff815008</color>
|
|
23
|
+
<color name="dt_color_text_on_dark_primary">#fff9f9f9</color>
|
|
24
|
+
<color name="dt_color_text_on_dark_secondary">#ffd2d2d2</color>
|
|
25
|
+
<color name="dt_color_surface_primary">#ffffffff</color>
|
|
26
|
+
<color name="dt_color_surface_secondary">#fff9f9f9</color>
|
|
27
|
+
<color name="dt_color_surface_moderate">#ffededed</color>
|
|
28
|
+
<color name="dt_color_surface_bold">#ffbbbbbb</color>
|
|
29
|
+
<color name="dt_color_surface_strong">#ff555555</color>
|
|
30
|
+
<color name="dt_color_surface_contrast">#ff222222</color>
|
|
31
|
+
<color name="dt_color_black_100">#fff9f9f9</color>
|
|
32
|
+
<color name="dt_color_black_200">#ffe9e9e9</color>
|
|
33
|
+
<color name="dt_color_black_300">#ffd2d2d2</color>
|
|
34
|
+
<color name="dt_color_black_400">#ffaaaaaa</color>
|
|
35
|
+
<color name="dt_color_black_500">#ff808080</color>
|
|
36
|
+
<color name="dt_color_black_600">#ff555555</color>
|
|
37
|
+
<color name="dt_color_black_700">#ff3a3a3a</color>
|
|
38
|
+
<color name="dt_color_black_800">#ff222222</color>
|
|
39
|
+
<color name="dt_color_black_900">#ff000000</color>
|
|
40
|
+
<color name="dt_color_purple_100">#ffeee5ff</color>
|
|
41
|
+
<color name="dt_color_purple_200">#ffd3bcff</color>
|
|
42
|
+
<color name="dt_color_purple_300">#ffab7eff</color>
|
|
43
|
+
<color name="dt_color_purple_400">#ff7c52ff</color>
|
|
44
|
+
<color name="dt_color_purple_500">#ff3a1d95</color>
|
|
45
|
+
<color name="dt_color_purple_600">#ff10022c</color>
|
|
46
|
+
<color name="dt_color_blue_100">#ffe3edf9</color>
|
|
47
|
+
<color name="dt_color_blue_200">#ff84bdff</color>
|
|
48
|
+
<color name="dt_color_blue_300">#ff51a0fe</color>
|
|
49
|
+
<color name="dt_color_blue_400">#ff1768c6</color>
|
|
50
|
+
<color name="dt_color_blue_500">#ff01326d</color>
|
|
51
|
+
<color name="dt_color_magenta_100">#ffff97d2</color>
|
|
52
|
+
<color name="dt_color_magenta_200">#fff756b1</color>
|
|
53
|
+
<color name="dt_color_magenta_300">#fff9008e</color>
|
|
54
|
+
<color name="dt_color_magenta_400">#ff8c0e56</color>
|
|
55
|
+
<color name="dt_color_magenta_500">#ff541a3b</color>
|
|
56
|
+
<color name="dt_color_gold_100">#ffffe793</color>
|
|
57
|
+
<color name="dt_color_gold_200">#ffffd362</color>
|
|
58
|
+
<color name="dt_color_gold_300">#fff6ab3c</color>
|
|
59
|
+
<color name="dt_color_gold_400">#ffd28f2b</color>
|
|
60
|
+
<color name="dt_color_gold_500">#ff815008</color>
|
|
61
|
+
<color name="dt_color_green_100">#ffddf4d9</color>
|
|
62
|
+
<color name="dt_color_green_200">#ff9fff90</color>
|
|
63
|
+
<color name="dt_color_green_300">#ff45f777</color>
|
|
64
|
+
<color name="dt_color_green_400">#ff1aa340</color>
|
|
65
|
+
<color name="dt_color_green_500">#ff124620</color>
|
|
66
|
+
<color name="dt_color_red_100">#ffffdcdc</color>
|
|
67
|
+
<color name="dt_color_red_200">#ffff7474</color>
|
|
68
|
+
<color name="dt_color_red_300">#ffff2e2e</color>
|
|
69
|
+
<color name="dt_color_red_400">#ffa41111</color>
|
|
70
|
+
<color name="dt_color_red_500">#ff540000</color>
|
|
71
|
+
<color name="dt_color_tan_100">#fff2f0ee</color>
|
|
72
|
+
<color name="dt_color_tan_200">#ffcec8c4</color>
|
|
73
|
+
<color name="dt_color_tan_300">#ff87807b</color>
|
|
74
|
+
<color name="dt_color_tan_400">#ff3f3d3c</color>
|
|
75
|
+
<color name="dt_color_tan_500">#ff121212</color>
|
|
76
|
+
<color name="dt_color_neutral_white">#ffffffff</color>
|
|
77
|
+
<color name="dt_color_neutral_black">#ff000000</color>
|
|
78
|
+
<color name="dt_opacity_0">0</color>
|
|
79
|
+
<color name="dt_opacity_100">0.05</color>
|
|
80
|
+
<color name="dt_opacity_200">0.1</color>
|
|
81
|
+
<color name="dt_opacity_300">0.2</color>
|
|
82
|
+
<color name="dt_opacity_400">0.25</color>
|
|
83
|
+
<color name="dt_opacity_500">0.3</color>
|
|
84
|
+
<color name="dt_opacity_600">0.4</color>
|
|
85
|
+
<color name="dt_opacity_700">0.5</color>
|
|
86
|
+
<color name="dt_opacity_800">0.6</color>
|
|
87
|
+
<color name="dt_opacity_900">0.7</color>
|
|
88
|
+
<color name="dt_opacity_1000">0.75</color>
|
|
89
|
+
<color name="dt_opacity_1100">0.8</color>
|
|
90
|
+
<color name="dt_opacity_1200">0.9</color>
|
|
91
|
+
<color name="dt_opacity_1300">1</color>
|
|
92
|
+
<color name="dt_shadow_small_0_color">#00000026</color>
|
|
93
|
+
<color name="dt_shadow_medium_0_color">#00000040</color>
|
|
94
|
+
<color name="dt_shadow_large_0_color">#0000004d</color>
|
|
95
|
+
<color name="dt_shadow_extra_large_0_color">#0000004d</color>
|
|
96
|
+
<color name="dt_shadow_card_0_color">#00000008</color>
|
|
97
|
+
<color name="dt_shadow_card_1_color">#0000000a</color>
|
|
98
|
+
<color name="dt_shadow_card_2_color">#00000014</color>
|
|
99
|
+
|
|
100
|
+
</resources>
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8"?>
|
|
2
|
+
|
|
3
|
+
<!--
|
|
4
|
+
Do not edit directly
|
|
5
|
+
Generated on Thu, 22 Sep 2022 21:05:34 GMT
|
|
6
|
+
-->
|
|
7
|
+
<resources>
|
|
8
|
+
<dimen name="dt_button_border_radius_extra_small">7px</dimen>
|
|
9
|
+
<dimen name="dt_button_border_radius_small">7.5px</dimen>
|
|
10
|
+
<dimen name="dt_button_border_radius_medium">8px</dimen>
|
|
11
|
+
<dimen name="dt_button_border_radius_large">9px</dimen>
|
|
12
|
+
<dimen name="dt_button_border_radius_extra_large">10px</dimen>
|
|
13
|
+
<dimen name="dt_button_space_gap">16px</dimen>
|
|
14
|
+
<dimen name="dt_button_padding_horizontal_extra_small">15px</dimen>
|
|
15
|
+
<dimen name="dt_button_padding_horizontal_small">15px</dimen>
|
|
16
|
+
<dimen name="dt_button_padding_horizontal_medium">15px</dimen>
|
|
17
|
+
<dimen name="dt_button_padding_horizontal_large">63px</dimen>
|
|
18
|
+
<dimen name="dt_button_padding_horizontal_extra_large">15px</dimen>
|
|
19
|
+
<dimen name="dt_button_padding_vertical_extra_small">13px</dimen>
|
|
20
|
+
<dimen name="dt_button_padding_vertical_small">13px</dimen>
|
|
21
|
+
<dimen name="dt_button_padding_vertical_medium">15px</dimen>
|
|
22
|
+
<dimen name="dt_button_padding_vertical_large">31px</dimen>
|
|
23
|
+
<dimen name="dt_button_padding_vertical_extra_large">31px</dimen>
|
|
24
|
+
<dimen name="dt_button_font_size_extra_small">12px</dimen>
|
|
25
|
+
<dimen name="dt_button_font_size_small">12px</dimen>
|
|
26
|
+
<dimen name="dt_button_font_size_medium">15px</dimen>
|
|
27
|
+
<dimen name="dt_button_font_size_large">19px</dimen>
|
|
28
|
+
<dimen name="dt_button_font_size_extra_large">27px</dimen>
|
|
29
|
+
<dimen name="dt_button_line_height_size_extra_small">120%</dimen>
|
|
30
|
+
<dimen name="dt_button_line_height_size_small">140%</dimen>
|
|
31
|
+
<dimen name="dt_button_line_height_size_medium">140%</dimen>
|
|
32
|
+
<dimen name="dt_button_line_height_size_large">160%</dimen>
|
|
33
|
+
<dimen name="dt_button_line_height_size_extra_large">160%</dimen>
|
|
34
|
+
<dimen name="dt_font_size_100">12px</dimen>
|
|
35
|
+
<dimen name="dt_font_size_200">15px</dimen>
|
|
36
|
+
<dimen name="dt_font_size_300">19px</dimen>
|
|
37
|
+
<dimen name="dt_font_size_400">27px</dimen>
|
|
38
|
+
<dimen name="dt_font_size_500">38px</dimen>
|
|
39
|
+
<dimen name="dt_font_size_root">10px</dimen>
|
|
40
|
+
<dimen name="dt_font_line_height_100">100%</dimen>
|
|
41
|
+
<dimen name="dt_font_line_height_200">120%</dimen>
|
|
42
|
+
<dimen name="dt_font_line_height_300">140%</dimen>
|
|
43
|
+
<dimen name="dt_font_line_height_400">160%</dimen>
|
|
44
|
+
<dimen name="dt_font_line_height_500">180%</dimen>
|
|
45
|
+
<dimen name="dt_font_line_height_600">200%</dimen>
|
|
46
|
+
<dimen name="dt_font_weight_normal">Regular</dimen>
|
|
47
|
+
<dimen name="dt_font_weight_medium">Medium</dimen>
|
|
48
|
+
<dimen name="dt_font_weight_semi_bold">Semibold</dimen>
|
|
49
|
+
<dimen name="dt_font_weight_bold">Bold</dimen>
|
|
50
|
+
<dimen name="dt_size_0">0.00dp</dimen>
|
|
51
|
+
<dimen name="dt_size_100">16.00dp</dimen>
|
|
52
|
+
<dimen name="dt_size_200">32.00dp</dimen>
|
|
53
|
+
<dimen name="dt_size_300">64.00dp</dimen>
|
|
54
|
+
<dimen name="dt_size_400">128.00dp</dimen>
|
|
55
|
+
<dimen name="dt_size_500">256.00dp</dimen>
|
|
56
|
+
<dimen name="dt_size_600">512.00dp</dimen>
|
|
57
|
+
<dimen name="dt_size_700">1024.00dp</dimen>
|
|
58
|
+
<dimen name="dt_size_800">2048.00dp</dimen>
|
|
59
|
+
<dimen name="dt_size_base">128.00dp</dimen>
|
|
60
|
+
<dimen name="dt_size_border_0">0.00dp</dimen>
|
|
61
|
+
<dimen name="dt_size_border_100">16.00dp</dimen>
|
|
62
|
+
<dimen name="dt_size_border_200">32.00dp</dimen>
|
|
63
|
+
<dimen name="dt_size_border_300">64.00dp</dimen>
|
|
64
|
+
<dimen name="dt_size_border_icon_100">16.00dp</dimen>
|
|
65
|
+
<dimen name="dt_size_border_icon_200">20.00dp</dimen>
|
|
66
|
+
<dimen name="dt_size_border_icon_300">24.00dp</dimen>
|
|
67
|
+
<dimen name="dt_size_border_icon_400">28.00dp</dimen>
|
|
68
|
+
<dimen name="dt_size_border_icon_500">28.00dp</dimen>
|
|
69
|
+
<dimen name="dt_size_radius_0">0.00dp</dimen>
|
|
70
|
+
<dimen name="dt_size_radius_100">16.00dp</dimen>
|
|
71
|
+
<dimen name="dt_size_radius_200">32.00dp</dimen>
|
|
72
|
+
<dimen name="dt_size_radius_300">64.00dp</dimen>
|
|
73
|
+
<dimen name="dt_size_radius_400">128.00dp</dimen>
|
|
74
|
+
<dimen name="dt_size_radius_500">512.00dp</dimen>
|
|
75
|
+
<dimen name="dt_size_icon_100">192.00sp</dimen>
|
|
76
|
+
<dimen name="dt_size_icon_200">224.00sp</dimen>
|
|
77
|
+
<dimen name="dt_size_icon_300">288.00sp</dimen>
|
|
78
|
+
<dimen name="dt_size_icon_400">320.00sp</dimen>
|
|
79
|
+
<dimen name="dt_size_icon_500">384.00sp</dimen>
|
|
80
|
+
<dimen name="dt_space_0">0px</dimen>
|
|
81
|
+
<dimen name="dt_space_100">1px</dimen>
|
|
82
|
+
<dimen name="dt_space_200">2px</dimen>
|
|
83
|
+
<dimen name="dt_space_300">4px</dimen>
|
|
84
|
+
<dimen name="dt_space_400">8px</dimen>
|
|
85
|
+
<dimen name="dt_space_500">16px</dimen>
|
|
86
|
+
<dimen name="dt_space_600">32px</dimen>
|
|
87
|
+
<dimen name="dt_space_700">64px</dimen>
|
|
88
|
+
<dimen name="dt_space_800">128px</dimen>
|
|
89
|
+
<dimen name="dt_space_base">8px</dimen>
|
|
90
|
+
|
|
91
|
+
</resources>
|
|
@@ -0,0 +1,323 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Do not edit directly
|
|
3
|
+
* Generated on Thu, 22 Sep 2022 21:05:34 GMT
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
:root {
|
|
7
|
+
--dt-token-set-order-0: base;
|
|
8
|
+
--dt-token-set-order-1: semantic;
|
|
9
|
+
--dt-token-set-order-2: components/button;
|
|
10
|
+
--dt-token-set-order-3: components/badge;
|
|
11
|
+
--dt-button-color-background-default: transparent;
|
|
12
|
+
--dt-button-color-background-primary: #7C52FF;
|
|
13
|
+
--dt-button-color-background-danger: #FF2E2E;
|
|
14
|
+
--dt-button-color-text-default: #7C52FF;
|
|
15
|
+
--dt-button-color-text-primary: #fff;
|
|
16
|
+
--dt-button-color-text-danger: #fff;
|
|
17
|
+
--dt-button-border-radius-extra-small: 0.7rem;
|
|
18
|
+
--dt-button-border-radius-small: 0.75rem;
|
|
19
|
+
--dt-button-border-radius-medium: 0.8rem;
|
|
20
|
+
--dt-button-border-radius-large: 0.9rem;
|
|
21
|
+
--dt-button-border-radius-extra-large: 1rem;
|
|
22
|
+
--dt-button-space-gap: 16px;
|
|
23
|
+
--dt-button-padding-horizontal-extra-small: 15px;
|
|
24
|
+
--dt-button-padding-horizontal-small: 15px;
|
|
25
|
+
--dt-button-padding-horizontal-medium: 15px;
|
|
26
|
+
--dt-button-padding-horizontal-large: 63px;
|
|
27
|
+
--dt-button-padding-horizontal-extra-large: 15px;
|
|
28
|
+
--dt-button-padding-vertical-extra-small: 13px;
|
|
29
|
+
--dt-button-padding-vertical-small: 13px;
|
|
30
|
+
--dt-button-padding-vertical-medium: 15px;
|
|
31
|
+
--dt-button-padding-vertical-large: 31px;
|
|
32
|
+
--dt-button-padding-vertical-extra-large: 31px;
|
|
33
|
+
--dt-button-font-size-extra-small: 1.2rem;
|
|
34
|
+
--dt-button-font-size-small: 1.2rem;
|
|
35
|
+
--dt-button-font-size-medium: 1.5rem;
|
|
36
|
+
--dt-button-font-size-large: 1.9rem;
|
|
37
|
+
--dt-button-font-size-extra-large: 2.7rem;
|
|
38
|
+
--dt-button-line-height-size-extra-small: 120%;
|
|
39
|
+
--dt-button-line-height-size-small: 140%;
|
|
40
|
+
--dt-button-line-height-size-medium: 140%;
|
|
41
|
+
--dt-button-line-height-size-large: 160%;
|
|
42
|
+
--dt-button-line-height-size-extra-large: 160%;
|
|
43
|
+
--dt-color-text-primary: #000000;
|
|
44
|
+
--dt-color-text-secondary: #3a3a3a;
|
|
45
|
+
--dt-color-text-tertiary: #555555;
|
|
46
|
+
--dt-color-text-muted: rgba(34, 34, 34, 0.5);
|
|
47
|
+
--dt-color-text-placeholder: #808080;
|
|
48
|
+
--dt-color-text-disabled: #808080;
|
|
49
|
+
--dt-color-text-error: #a41111;
|
|
50
|
+
--dt-color-text-success: #00671d;
|
|
51
|
+
--dt-color-text-warning: #815008;
|
|
52
|
+
--dt-color-text-on-dark-primary: #f9f9f9;
|
|
53
|
+
--dt-color-text-on-dark-secondary: #d2d2d2;
|
|
54
|
+
--dt-color-surface-primary: #ffffff;
|
|
55
|
+
--dt-color-surface-secondary: #f9f9f9;
|
|
56
|
+
--dt-color-surface-moderate: #ededed;
|
|
57
|
+
--dt-color-surface-bold: #bbbbbb;
|
|
58
|
+
--dt-color-surface-strong: #555555;
|
|
59
|
+
--dt-color-surface-contrast: #222222;
|
|
60
|
+
--dt-color-black-100: #f9f9f9;
|
|
61
|
+
--dt-color-black-200: #e9e9e9;
|
|
62
|
+
--dt-color-black-300: #d2d2d2;
|
|
63
|
+
--dt-color-black-400: #aaaaaa;
|
|
64
|
+
--dt-color-black-500: #808080;
|
|
65
|
+
--dt-color-black-600: #555555;
|
|
66
|
+
--dt-color-black-700: #3a3a3a;
|
|
67
|
+
--dt-color-black-800: #222222;
|
|
68
|
+
--dt-color-black-900: #000000;
|
|
69
|
+
--dt-color-purple-100: #eee5ff;
|
|
70
|
+
--dt-color-purple-200: #d3bcff;
|
|
71
|
+
--dt-color-purple-300: #ab7eff;
|
|
72
|
+
--dt-color-purple-400: #7c52ff;
|
|
73
|
+
--dt-color-purple-500: #3a1d95;
|
|
74
|
+
--dt-color-purple-600: #10022c;
|
|
75
|
+
--dt-color-blue-100: #e3edf9;
|
|
76
|
+
--dt-color-blue-200: #84bdff;
|
|
77
|
+
--dt-color-blue-300: #51a0fe;
|
|
78
|
+
--dt-color-blue-400: #1768c6;
|
|
79
|
+
--dt-color-blue-500: #01326d;
|
|
80
|
+
--dt-color-magenta-100: #ff97d2;
|
|
81
|
+
--dt-color-magenta-200: #f756b1;
|
|
82
|
+
--dt-color-magenta-300: #f9008e;
|
|
83
|
+
--dt-color-magenta-400: #8c0e56;
|
|
84
|
+
--dt-color-magenta-500: #541a3b;
|
|
85
|
+
--dt-color-gold-100: #ffe793;
|
|
86
|
+
--dt-color-gold-200: #ffd362;
|
|
87
|
+
--dt-color-gold-300: #f6ab3c;
|
|
88
|
+
--dt-color-gold-400: #d28f2b;
|
|
89
|
+
--dt-color-gold-500: #815008;
|
|
90
|
+
--dt-color-green-100: #ddf4d9;
|
|
91
|
+
--dt-color-green-200: #9fff90;
|
|
92
|
+
--dt-color-green-300: #45f777;
|
|
93
|
+
--dt-color-green-400: #1aa340;
|
|
94
|
+
--dt-color-green-500: #124620;
|
|
95
|
+
--dt-color-red-100: #ffdcdc;
|
|
96
|
+
--dt-color-red-200: #ff7474;
|
|
97
|
+
--dt-color-red-300: #ff2e2e;
|
|
98
|
+
--dt-color-red-400: #a41111;
|
|
99
|
+
--dt-color-red-500: #540000;
|
|
100
|
+
--dt-color-tan-100: #f2f0ee;
|
|
101
|
+
--dt-color-tan-200: #cec8c4;
|
|
102
|
+
--dt-color-tan-300: #87807b;
|
|
103
|
+
--dt-color-tan-400: #3f3d3c;
|
|
104
|
+
--dt-color-tan-500: #121212;
|
|
105
|
+
--dt-color-neutral-white: #ffffff;
|
|
106
|
+
--dt-color-neutral-black: #000000;
|
|
107
|
+
--dt-opacity-0: 0;
|
|
108
|
+
--dt-opacity-100: 0.05;
|
|
109
|
+
--dt-opacity-200: 0.1;
|
|
110
|
+
--dt-opacity-300: 0.2;
|
|
111
|
+
--dt-opacity-400: 0.25;
|
|
112
|
+
--dt-opacity-500: 0.3;
|
|
113
|
+
--dt-opacity-600: 0.4;
|
|
114
|
+
--dt-opacity-700: 0.5;
|
|
115
|
+
--dt-opacity-800: 0.6;
|
|
116
|
+
--dt-opacity-900: 0.7;
|
|
117
|
+
--dt-opacity-1000: 0.75;
|
|
118
|
+
--dt-opacity-1100: 0.8;
|
|
119
|
+
--dt-opacity-1200: 0.9;
|
|
120
|
+
--dt-opacity-1300: 1;
|
|
121
|
+
--dt-font-family-body: SF Pro, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
|
122
|
+
--dt-font-family-expressive: Archivo, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
|
123
|
+
--dt-font-family-mono: SF Mono, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace;
|
|
124
|
+
--dt-font-size-100: 1.2rem;
|
|
125
|
+
--dt-font-size-200: 1.5rem;
|
|
126
|
+
--dt-font-size-300: 1.9rem;
|
|
127
|
+
--dt-font-size-400: 2.7rem;
|
|
128
|
+
--dt-font-size-500: 3.8rem;
|
|
129
|
+
--dt-font-size-root: 1rem;
|
|
130
|
+
--dt-font-line-height-100: 100%;
|
|
131
|
+
--dt-font-line-height-200: 120%;
|
|
132
|
+
--dt-font-line-height-300: 140%;
|
|
133
|
+
--dt-font-line-height-400: 160%;
|
|
134
|
+
--dt-font-line-height-500: 180%;
|
|
135
|
+
--dt-font-line-height-600: 200%;
|
|
136
|
+
--dt-font-weight-normal: 400;
|
|
137
|
+
--dt-font-weight-medium: 500;
|
|
138
|
+
--dt-font-weight-semi-bold: 600;
|
|
139
|
+
--dt-font-weight-bold: 700;
|
|
140
|
+
--dt-font-text-case-uppercase: uppercase;
|
|
141
|
+
--dt-font-text-case-lowercase: lowercase;
|
|
142
|
+
--dt-font-text-case-capitalize: capitalize;
|
|
143
|
+
--dt-font-text-case-none: none;
|
|
144
|
+
--dt-typography-body-small-font-family: SF Pro;
|
|
145
|
+
--dt-typography-body-small-font-weight: 400;
|
|
146
|
+
--dt-typography-body-small-line-height: 140%;
|
|
147
|
+
--dt-typography-body-small-font-size: 1.2rem;
|
|
148
|
+
--dt-typography-body-base-font-family: SF Pro;
|
|
149
|
+
--dt-typography-body-base-font-weight: 400;
|
|
150
|
+
--dt-typography-body-base-line-height: 160%;
|
|
151
|
+
--dt-typography-body-base-font-size: 1.5rem;
|
|
152
|
+
--dt-typography-body-compact-small-font-family: SF Pro;
|
|
153
|
+
--dt-typography-body-compact-small-font-weight: 400;
|
|
154
|
+
--dt-typography-body-compact-small-line-height: 120%;
|
|
155
|
+
--dt-typography-body-compact-small-font-size: 1.2rem;
|
|
156
|
+
--dt-typography-body-compact-base-font-family: SF Pro;
|
|
157
|
+
--dt-typography-body-compact-base-font-weight: 400;
|
|
158
|
+
--dt-typography-body-compact-base-line-height: 140%;
|
|
159
|
+
--dt-typography-body-compact-base-font-size: 1.5rem;
|
|
160
|
+
--dt-typography-headline-eyebrow-font-family: SF Pro;
|
|
161
|
+
--dt-typography-headline-eyebrow-font-weight: 400;
|
|
162
|
+
--dt-typography-headline-eyebrow-line-height: 140%;
|
|
163
|
+
--dt-typography-headline-eyebrow-font-size: 1.2rem;
|
|
164
|
+
--dt-typography-headline-eyebrow-text-case: uppercase;
|
|
165
|
+
--dt-typography-headline-small-font-family: SF Pro;
|
|
166
|
+
--dt-typography-headline-small-font-weight: 700;
|
|
167
|
+
--dt-typography-headline-small-line-height: 140%;
|
|
168
|
+
--dt-typography-headline-small-font-size: 1.2rem;
|
|
169
|
+
--dt-typography-headline-medium-font-family: SF Pro;
|
|
170
|
+
--dt-typography-headline-medium-font-weight: 700;
|
|
171
|
+
--dt-typography-headline-medium-line-height: 160%;
|
|
172
|
+
--dt-typography-headline-medium-font-size: 1.5rem;
|
|
173
|
+
--dt-typography-headline-large-font-family: SF Pro;
|
|
174
|
+
--dt-typography-headline-large-font-weight: 700;
|
|
175
|
+
--dt-typography-headline-large-line-height: 160%;
|
|
176
|
+
--dt-typography-headline-large-font-size: 1.9rem;
|
|
177
|
+
--dt-typography-headline-extra-large-font-family: SF Pro;
|
|
178
|
+
--dt-typography-headline-extra-large-font-weight: 500;
|
|
179
|
+
--dt-typography-headline-extra-large-line-height: 120%;
|
|
180
|
+
--dt-typography-headline-extra-large-font-size: 2.7rem;
|
|
181
|
+
--dt-typography-headline-extra-extra-large-font-family: SF Pro;
|
|
182
|
+
--dt-typography-headline-extra-extra-large-font-weight: 500;
|
|
183
|
+
--dt-typography-headline-extra-extra-large-line-height: 120%;
|
|
184
|
+
--dt-typography-headline-extra-extra-large-font-size: 3.8rem;
|
|
185
|
+
--dt-typography-headline-compact-small-font-family: SF Pro;
|
|
186
|
+
--dt-typography-headline-compact-small-font-weight: 700;
|
|
187
|
+
--dt-typography-headline-compact-small-line-height: 120%;
|
|
188
|
+
--dt-typography-headline-compact-small-font-size: 1.2rem;
|
|
189
|
+
--dt-typography-headline-compact-base-font-family: SF Pro;
|
|
190
|
+
--dt-typography-headline-compact-base-font-weight: 700;
|
|
191
|
+
--dt-typography-headline-compact-base-line-height: 140%;
|
|
192
|
+
--dt-typography-headline-compact-base-font-size: 1.5rem;
|
|
193
|
+
--dt-typography-label-small-font-family: SF Pro;
|
|
194
|
+
--dt-typography-label-small-font-weight: 600;
|
|
195
|
+
--dt-typography-label-small-line-height: 140%;
|
|
196
|
+
--dt-typography-label-small-font-size: 1.2rem;
|
|
197
|
+
--dt-typography-label-base-font-family: SF Pro;
|
|
198
|
+
--dt-typography-label-base-font-weight: 600;
|
|
199
|
+
--dt-typography-label-base-line-height: 160%;
|
|
200
|
+
--dt-typography-label-base-font-size: 1.5rem;
|
|
201
|
+
--dt-typography-label-compact-small-font-family: SF Pro;
|
|
202
|
+
--dt-typography-label-compact-small-font-weight: 600;
|
|
203
|
+
--dt-typography-label-compact-small-line-height: 120%;
|
|
204
|
+
--dt-typography-label-compact-small-font-size: 1.2rem;
|
|
205
|
+
--dt-typography-label-compact-base-font-family: SF Pro;
|
|
206
|
+
--dt-typography-label-compact-base-font-weight: 600;
|
|
207
|
+
--dt-typography-label-compact-base-line-height: 140%;
|
|
208
|
+
--dt-typography-label-compact-base-font-size: 1.5rem;
|
|
209
|
+
--dt-typography-label-compact-plain-small-font-family: SF Pro;
|
|
210
|
+
--dt-typography-label-compact-plain-small-font-weight: 400;
|
|
211
|
+
--dt-typography-label-compact-plain-small-line-height: 120%;
|
|
212
|
+
--dt-typography-label-compact-plain-small-font-size: 1.2rem;
|
|
213
|
+
--dt-typography-label-compact-plain-base-font-family: SF Pro;
|
|
214
|
+
--dt-typography-label-compact-plain-base-font-weight: 400;
|
|
215
|
+
--dt-typography-label-compact-plain-base-line-height: 140%;
|
|
216
|
+
--dt-typography-label-compact-plain-base-font-size: 1.5rem;
|
|
217
|
+
--dt-typography-label-plain-small-font-family: SF Pro;
|
|
218
|
+
--dt-typography-label-plain-small-font-weight: 400;
|
|
219
|
+
--dt-typography-label-plain-small-line-height: 140%;
|
|
220
|
+
--dt-typography-label-plain-small-font-size: 1.2rem;
|
|
221
|
+
--dt-typography-label-plain-base-font-family: SF Pro;
|
|
222
|
+
--dt-typography-label-plain-base-font-weight: 400;
|
|
223
|
+
--dt-typography-label-plain-base-line-height: 160%;
|
|
224
|
+
--dt-typography-label-plain-base-font-size: 1.5rem;
|
|
225
|
+
--dt-typography-helper-small-font-family: SF Pro;
|
|
226
|
+
--dt-typography-helper-small-font-weight: 400;
|
|
227
|
+
--dt-typography-helper-small-line-height: 120%;
|
|
228
|
+
--dt-typography-helper-small-font-size: 1.2rem;
|
|
229
|
+
--dt-typography-helper-base-font-family: SF Pro;
|
|
230
|
+
--dt-typography-helper-base-font-weight: 400;
|
|
231
|
+
--dt-typography-helper-base-line-height: 140%;
|
|
232
|
+
--dt-typography-helper-base-font-size: 1.5rem;
|
|
233
|
+
--dt-typography-code-small-font-family: SF Mono;
|
|
234
|
+
--dt-typography-code-small-font-weight: 400;
|
|
235
|
+
--dt-typography-code-small-line-height: 120%;
|
|
236
|
+
--dt-typography-code-small-font-size: 1.2rem;
|
|
237
|
+
--dt-typography-code-base-font-family: SF Mono;
|
|
238
|
+
--dt-typography-code-base-font-weight: 400;
|
|
239
|
+
--dt-typography-code-base-line-height: 120%;
|
|
240
|
+
--dt-typography-code-base-font-size: 1.5rem;
|
|
241
|
+
--dt-size-0: 0rem;
|
|
242
|
+
--dt-size-100: 0.1rem;
|
|
243
|
+
--dt-size-200: 0.2rem;
|
|
244
|
+
--dt-size-300: 0.4rem;
|
|
245
|
+
--dt-size-400: 0.8rem;
|
|
246
|
+
--dt-size-500: 1.6rem;
|
|
247
|
+
--dt-size-600: 3.2rem;
|
|
248
|
+
--dt-size-700: 6.4rem;
|
|
249
|
+
--dt-size-800: 12.8rem;
|
|
250
|
+
--dt-size-base: 0.8rem;
|
|
251
|
+
--dt-size-border-0: 0rem;
|
|
252
|
+
--dt-size-border-100: 0.1rem;
|
|
253
|
+
--dt-size-border-200: 0.2rem;
|
|
254
|
+
--dt-size-border-300: 0.4rem;
|
|
255
|
+
--dt-size-border-icon-100: 0.1rem;
|
|
256
|
+
--dt-size-border-icon-200: 0.125rem;
|
|
257
|
+
--dt-size-border-icon-300: 0.15rem;
|
|
258
|
+
--dt-size-border-icon-400: 0.175rem;
|
|
259
|
+
--dt-size-border-icon-500: 0.175rem;
|
|
260
|
+
--dt-size-radius-0: 0rem;
|
|
261
|
+
--dt-size-radius-100: 0.1rem;
|
|
262
|
+
--dt-size-radius-200: 0.2rem;
|
|
263
|
+
--dt-size-radius-300: 0.4rem;
|
|
264
|
+
--dt-size-radius-400: 0.8rem;
|
|
265
|
+
--dt-size-radius-500: 3.2rem;
|
|
266
|
+
--dt-size-icon-100: 1.2rem;
|
|
267
|
+
--dt-size-icon-200: 1.4rem;
|
|
268
|
+
--dt-size-icon-300: 1.8rem;
|
|
269
|
+
--dt-size-icon-400: 2rem;
|
|
270
|
+
--dt-size-icon-500: 2.4rem;
|
|
271
|
+
--dt-space-0: 0px;
|
|
272
|
+
--dt-space-100: 1px;
|
|
273
|
+
--dt-space-200: 2px;
|
|
274
|
+
--dt-space-300: 4px;
|
|
275
|
+
--dt-space-400: 8px;
|
|
276
|
+
--dt-space-500: 16px;
|
|
277
|
+
--dt-space-600: 32px;
|
|
278
|
+
--dt-space-700: 64px;
|
|
279
|
+
--dt-space-800: 128px;
|
|
280
|
+
--dt-space-base: 8px;
|
|
281
|
+
--dt-shadow-small-0-x: 0;
|
|
282
|
+
--dt-shadow-small-0-y: 0.2rem;
|
|
283
|
+
--dt-shadow-small-0-blur: 0.4rem;
|
|
284
|
+
--dt-shadow-small-0-spread: 0;
|
|
285
|
+
--dt-shadow-small-0-color: #00000026;
|
|
286
|
+
--dt-shadow-small-0-type: dropShadow;
|
|
287
|
+
--dt-shadow-medium-0-x: 0;
|
|
288
|
+
--dt-shadow-medium-0-y: 0.2rem;
|
|
289
|
+
--dt-shadow-medium-0-blur: 0.8rem;
|
|
290
|
+
--dt-shadow-medium-0-spread: 0;
|
|
291
|
+
--dt-shadow-medium-0-color: #00000040;
|
|
292
|
+
--dt-shadow-medium-0-type: dropShadow;
|
|
293
|
+
--dt-shadow-large-0-x: 0;
|
|
294
|
+
--dt-shadow-large-0-y: 0.2rem;
|
|
295
|
+
--dt-shadow-large-0-blur: 1.6rem;
|
|
296
|
+
--dt-shadow-large-0-spread: 0;
|
|
297
|
+
--dt-shadow-large-0-color: #0000004d;
|
|
298
|
+
--dt-shadow-large-0-type: dropShadow;
|
|
299
|
+
--dt-shadow-extra-large-0-x: 0;
|
|
300
|
+
--dt-shadow-extra-large-0-y: 0.2rem;
|
|
301
|
+
--dt-shadow-extra-large-0-blur: 3.2rem;
|
|
302
|
+
--dt-shadow-extra-large-0-spread: 0;
|
|
303
|
+
--dt-shadow-extra-large-0-color: #0000004d;
|
|
304
|
+
--dt-shadow-extra-large-0-type: dropShadow;
|
|
305
|
+
--dt-shadow-card-0-x: 0;
|
|
306
|
+
--dt-shadow-card-0-y: 0.1rem;
|
|
307
|
+
--dt-shadow-card-0-blur: 0.2rem;
|
|
308
|
+
--dt-shadow-card-0-spread: 0;
|
|
309
|
+
--dt-shadow-card-0-color: #00000008;
|
|
310
|
+
--dt-shadow-card-0-type: dropShadow;
|
|
311
|
+
--dt-shadow-card-1-x: 0;
|
|
312
|
+
--dt-shadow-card-1-y: 0.2rem;
|
|
313
|
+
--dt-shadow-card-1-blur: 0.4rem;
|
|
314
|
+
--dt-shadow-card-1-spread: 0;
|
|
315
|
+
--dt-shadow-card-1-color: #0000000a;
|
|
316
|
+
--dt-shadow-card-1-type: dropShadow;
|
|
317
|
+
--dt-shadow-card-2-x: 0;
|
|
318
|
+
--dt-shadow-card-2-y: 0.2rem;
|
|
319
|
+
--dt-shadow-card-2-blur: 1.6rem;
|
|
320
|
+
--dt-shadow-card-2-spread: 0;
|
|
321
|
+
--dt-shadow-card-2-color: #00000014;
|
|
322
|
+
--dt-shadow-card-2-type: dropShadow;
|
|
323
|
+
}
|