@pantheon-systems/pds-design-tokens 1.0.0-dev.13 → 1.0.0-dev.131
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 +2 -3
- package/build/css/pds-design-tokens-dark-mode.css +199 -45
- package/build/css/pds-design-tokens-light-mode.css +245 -55
- package/build/css/pds-design-tokens.css +84 -1
- package/build/figma/pds-design-tokens-figma.json +14908 -5323
- package/build/json/pds-design-tokens-dark-mode.json +5427 -1821
- package/build/json/pds-design-tokens-light-mode.json +6251 -1634
- package/build/json/pds-design-tokens.json +1340 -238
- package/package.json +1 -1
- package/build/scss/_pds-design-tokens-dark-mode.scss +0 -104
- package/build/scss/_pds-design-tokens-light-mode.scss +0 -104
- package/build/scss/_pds-design-tokens.scss +0 -17
|
@@ -10,11 +10,94 @@
|
|
|
10
10
|
*/
|
|
11
11
|
|
|
12
12
|
:root {
|
|
13
|
+
--pds-animation-button-transition: all var(--pds-animation-transition-default-duration) var(--pds-animation-transition-default-timing-function) var(--pds-animation-transition-default-delay);
|
|
14
|
+
--pds-animation-focus-transition: outline var(--pds-animation-transition-default-duration) var(--pds-animation-transition-default-timing-function) var(--pds-animation-transition-default-delay);
|
|
15
|
+
--pds-animation-input-transition: background-color var(--pds-animation-transition-default-duration) var(--pds-animation-transition-default-timing-function) var(--pds-animation-transition-default-delay), border-color var(--pds-animation-transition-default-duration) var(--pds-animation-transition-default-timing-function) var(--pds-animation-transition-default-delay);
|
|
16
|
+
--pds-animation-link-transition: all var(--pds-animation-transition-default-duration) var(--pds-animation-transition-default-timing-function) var(--pds-animation-transition-default-delay);
|
|
17
|
+
--pds-animation-reveal-transition: all var(--pds-animation-transition-reveal-duration) var(--pds-animation-transition-default-timing-function);
|
|
18
|
+
--pds-animation-rotation-transition: transform var(--pds-animation-transition-default-duration) var(--pds-animation-transition-default-timing-function) var(--pds-animation-transition-default-delay);
|
|
13
19
|
--pds-animation-transition-default-delay: 0s;
|
|
14
20
|
--pds-animation-transition-default-duration: 200ms;
|
|
15
21
|
--pds-animation-transition-default-timing-function: ease-in-out;
|
|
16
22
|
--pds-animation-transition-dropdown-duration: 300ms;
|
|
23
|
+
--pds-animation-transition-reveal-duration: 300ms;
|
|
24
|
+
--pds-border-radius-bar: 3.5rem;
|
|
25
|
+
--pds-border-radius-container: 0.375rem;
|
|
17
26
|
--pds-border-radius-default: 0.1875rem;
|
|
18
|
-
--pds-border-width-default:
|
|
27
|
+
--pds-border-width-default: 0.0625rem;
|
|
28
|
+
--pds-border-width-outline: 0.125rem;
|
|
29
|
+
--pds-border-width-stepper: 0.1875rem;
|
|
30
|
+
--pds-container-max-width-narrow: 1024px;
|
|
31
|
+
--pds-container-max-width-standard: 1200px;
|
|
32
|
+
--pds-container-max-width-wide: 1440px;
|
|
33
|
+
--pds-container-max-width-x-wide: 1600px;
|
|
34
|
+
--pds-container-modal-width-large: 44rem;
|
|
35
|
+
--pds-container-modal-width-medium: 36rem;
|
|
36
|
+
--pds-container-modal-width-small: 25rem;
|
|
37
|
+
--pds-container-padding-base: var(--pds-spacing-xl);
|
|
38
|
+
--pds-container-padding-narrow-bp-lg: 20%;
|
|
39
|
+
--pds-container-padding-narrow-bp-md: 12%;
|
|
40
|
+
--pds-container-padding-standard-bp-lg: 8%;
|
|
41
|
+
--pds-container-padding-standard-bp-md: 6%;
|
|
42
|
+
--pds-container-padding-wide-bp-lg: 4%;
|
|
43
|
+
--pds-container-padding-wide-bp-md: 5%;
|
|
44
|
+
--pds-container-tooltip-max-width: 12.5rem;
|
|
45
|
+
--pds-grid-marketing-column-medium-large: 4.36875%;
|
|
46
|
+
--pds-grid-marketing-column-small: 21.34375%;
|
|
47
|
+
--pds-grid-marketing-gap-medium-large: 4.325%;
|
|
48
|
+
--pds-grid-marketing-gap-small: 4.875%;
|
|
49
|
+
--pds-spacing-2xl: 1.953rem;
|
|
50
|
+
--pds-spacing-2xs: 0.512rem;
|
|
51
|
+
--pds-spacing-3xl: 2.441rem;
|
|
52
|
+
--pds-spacing-3xs: 0.41rem;
|
|
53
|
+
--pds-spacing-4xl: 3.052rem;
|
|
54
|
+
--pds-spacing-4xs: 0.328rem;
|
|
55
|
+
--pds-spacing-5xl: 3.815rem;
|
|
56
|
+
--pds-spacing-5xs: 0.25rem;
|
|
57
|
+
--pds-spacing-6xl: 4.678rem;
|
|
58
|
+
--pds-spacing-6xs: 0.125rem;
|
|
59
|
+
--pds-spacing-7xl: 5.96rem;
|
|
60
|
+
--pds-spacing-8xl: 7.451rem;
|
|
61
|
+
--pds-spacing-dashboard-nav-item-height: 2.25rem;
|
|
62
|
+
--pds-spacing-dashboard-nav-item-padding: 0.625rem;
|
|
63
|
+
--pds-spacing-l: 1.25rem;
|
|
64
|
+
--pds-spacing-m: 1rem;
|
|
65
|
+
--pds-spacing-s: 0.8rem;
|
|
66
|
+
--pds-spacing-xl: 1.563rem;
|
|
67
|
+
--pds-spacing-xs: 0.64rem;
|
|
68
|
+
--pds-typography-font-code: 'Source Code Pro', monospace;
|
|
19
69
|
--pds-typography-font-default: 'Poppins', sans-serif;
|
|
70
|
+
--pds-typography-font-secondary: 'Aleo', serif;
|
|
71
|
+
--pds-typography-font-weight-bold: 700;
|
|
72
|
+
--pds-typography-font-weight-light: 300;
|
|
73
|
+
--pds-typography-font-weight-regular: 400;
|
|
74
|
+
--pds-typography-font-weight-semibold: 600;
|
|
75
|
+
--pds-typography-letter-spacing-l: 0.04rem;
|
|
76
|
+
--pds-typography-letter-spacing-m: 0.02rem;
|
|
77
|
+
--pds-typography-letter-spacing-s: 0.01rem;
|
|
78
|
+
--pds-typography-letter-spacing-xl: 0.06rem;
|
|
79
|
+
--pds-typography-line-height-l: 165%;
|
|
80
|
+
--pds-typography-line-height-m: 140%;
|
|
81
|
+
--pds-typography-line-height-s: 120%;
|
|
82
|
+
--pds-typography-line-height-xl: 195%;
|
|
83
|
+
--pds-typography-multiplier-medium: 0.88;
|
|
84
|
+
--pds-typography-multiplier-small: 0.84;
|
|
85
|
+
--pds-typography-size-2xl: 1.728rem;
|
|
86
|
+
--pds-typography-size-3xl: 2.074rem;
|
|
87
|
+
--pds-typography-size-4xl: 2.488rem;
|
|
88
|
+
--pds-typography-size-5xl: 2.986rem;
|
|
89
|
+
--pds-typography-size-6xl: 3.583rem;
|
|
90
|
+
--pds-typography-size-7xl: 4.3rem;
|
|
91
|
+
--pds-typography-size-8xl: 5.160rem;
|
|
92
|
+
--pds-typography-size-9xl: 6.192rem;
|
|
93
|
+
--pds-typography-size-l: 1.2rem;
|
|
94
|
+
--pds-typography-size-m: 1rem;
|
|
95
|
+
--pds-typography-size-s: 0.833rem;
|
|
96
|
+
--pds-typography-size-xl: 1.44rem;
|
|
97
|
+
--pds-typography-size-xs: 0.694rem;
|
|
98
|
+
--pds-z-index-dropdown: 200;
|
|
99
|
+
--pds-z-index-modal: 500;
|
|
100
|
+
--pds-z-index-navigation: 100;
|
|
101
|
+
--pds-z-index-notifications: 300;
|
|
102
|
+
--pds-z-index-overlay: 400;
|
|
20
103
|
}
|