@pantheon-systems/pds-design-tokens 1.0.0-dev.2 → 1.0.0-dev.20

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.
@@ -1,89 +1,164 @@
1
1
  {
2
2
  "animation": {
3
- "button": {
3
+ "focus": {
4
4
  "transition": {
5
- "value": "background-color: 200ms ease-in-out 0s, border-color: 200ms ease-in-out 0s",
5
+ "value": "outline: 200ms ease-in-out 0s",
6
6
  "filePath": "tokens/animation/alias.json",
7
7
  "isSource": true,
8
8
  "original": {
9
- "value": "background-color: {animation.transition.duration.value} {animation.transition.timing-function.value} {animation.transition.delay.value}, border-color: {animation.transition.duration.value} {animation.transition.timing-function.value} {animation.transition.delay.value}"
9
+ "value": "outline: {animation.transition.default.duration.value} {animation.transition.default.timing-function.value} {animation.transition.default.delay.value}"
10
10
  },
11
- "name": "animation-button-transition",
11
+ "name": "animation-focus-transition",
12
12
  "attributes": {
13
13
  "category": "animation",
14
- "type": "button",
14
+ "type": "focus",
15
15
  "item": "transition"
16
16
  },
17
17
  "path": [
18
18
  "animation",
19
- "button",
19
+ "focus",
20
20
  "transition"
21
21
  ]
22
22
  }
23
23
  },
24
- "transition": {
25
- "delay": {
26
- "value": "0s",
27
- "public": true,
28
- "filePath": "tokens/animation/base.json",
24
+ "button": {
25
+ "transition": {
26
+ "value": "background-color: 200ms ease-in-out 0s, border-color: 200ms ease-in-out 0s",
27
+ "filePath": "tokens/animation/alias.json",
29
28
  "isSource": true,
30
29
  "original": {
31
- "value": "0s",
32
- "public": true
30
+ "value": "background-color: {animation.transition.default.duration.value} {animation.transition.default.timing-function.value} {animation.transition.default.delay.value}, border-color: {animation.transition.default.duration.value} {animation.transition.default.timing-function.value} {animation.transition.default.delay.value}"
33
31
  },
34
- "name": "animation-transition-delay",
32
+ "name": "animation-button-transition",
35
33
  "attributes": {
36
34
  "category": "animation",
37
- "type": "transition",
38
- "item": "delay"
35
+ "type": "button",
36
+ "item": "transition"
39
37
  },
40
38
  "path": [
41
39
  "animation",
42
- "transition",
43
- "delay"
40
+ "button",
41
+ "transition"
44
42
  ]
45
- },
46
- "duration": {
47
- "value": "200ms",
48
- "public": true,
49
- "filePath": "tokens/animation/base.json",
43
+ }
44
+ },
45
+ "input": {
46
+ "transition": {
47
+ "value": "background-color: 200ms ease-in-out 0s, border-color: 200ms ease-in-out 0s",
48
+ "filePath": "tokens/animation/alias.json",
50
49
  "isSource": true,
51
50
  "original": {
52
- "value": "200ms",
53
- "public": true
51
+ "value": "background-color: {animation.transition.default.duration.value} {animation.transition.default.timing-function.value} {animation.transition.default.delay.value}, border-color: {animation.transition.default.duration.value} {animation.transition.default.timing-function.value} {animation.transition.default.delay.value}"
54
52
  },
55
- "name": "animation-transition-duration",
53
+ "name": "animation-input-transition",
56
54
  "attributes": {
57
55
  "category": "animation",
58
- "type": "transition",
59
- "item": "duration"
56
+ "type": "input",
57
+ "item": "transition"
60
58
  },
61
59
  "path": [
62
60
  "animation",
63
- "transition",
64
- "duration"
61
+ "input",
62
+ "transition"
65
63
  ]
66
- },
67
- "timing-function": {
68
- "value": "ease-in-out",
69
- "public": true,
70
- "filePath": "tokens/animation/base.json",
71
- "isSource": true,
72
- "original": {
64
+ }
65
+ },
66
+ "transition": {
67
+ "default": {
68
+ "delay": {
69
+ "value": "0s",
70
+ "public": true,
71
+ "filePath": "tokens/animation/base.json",
72
+ "isSource": true,
73
+ "original": {
74
+ "value": "0s",
75
+ "public": true
76
+ },
77
+ "name": "animation-transition-default-delay",
78
+ "attributes": {
79
+ "category": "animation",
80
+ "type": "transition",
81
+ "item": "default",
82
+ "subitem": "delay"
83
+ },
84
+ "path": [
85
+ "animation",
86
+ "transition",
87
+ "default",
88
+ "delay"
89
+ ]
90
+ },
91
+ "duration": {
92
+ "value": "200ms",
93
+ "public": true,
94
+ "filePath": "tokens/animation/base.json",
95
+ "isSource": true,
96
+ "original": {
97
+ "value": "200ms",
98
+ "public": true
99
+ },
100
+ "name": "animation-transition-default-duration",
101
+ "attributes": {
102
+ "category": "animation",
103
+ "type": "transition",
104
+ "item": "default",
105
+ "subitem": "duration"
106
+ },
107
+ "path": [
108
+ "animation",
109
+ "transition",
110
+ "default",
111
+ "duration"
112
+ ]
113
+ },
114
+ "timing-function": {
73
115
  "value": "ease-in-out",
74
- "public": true
75
- },
76
- "name": "animation-transition-timing-function",
77
- "attributes": {
78
- "category": "animation",
79
- "type": "transition",
80
- "item": "timing-function"
81
- },
82
- "path": [
83
- "animation",
84
- "transition",
85
- "timing-function"
86
- ]
116
+ "public": true,
117
+ "filePath": "tokens/animation/base.json",
118
+ "isSource": true,
119
+ "original": {
120
+ "value": "ease-in-out",
121
+ "public": true
122
+ },
123
+ "name": "animation-transition-default-timing-function",
124
+ "attributes": {
125
+ "category": "animation",
126
+ "type": "transition",
127
+ "item": "default",
128
+ "subitem": "timing-function"
129
+ },
130
+ "path": [
131
+ "animation",
132
+ "transition",
133
+ "default",
134
+ "timing-function"
135
+ ]
136
+ }
137
+ },
138
+ "dropdown": {
139
+ "duration": {
140
+ "value": "300ms",
141
+ "public": true,
142
+ "filePath": "tokens/animation/base.json",
143
+ "isSource": true,
144
+ "original": {
145
+ "value": "300ms",
146
+ "public": true
147
+ },
148
+ "name": "animation-transition-dropdown-duration",
149
+ "attributes": {
150
+ "category": "animation",
151
+ "type": "transition",
152
+ "item": "dropdown",
153
+ "subitem": "duration"
154
+ },
155
+ "path": [
156
+ "animation",
157
+ "transition",
158
+ "dropdown",
159
+ "duration"
160
+ ]
161
+ }
87
162
  }
88
163
  }
89
164
  },
@@ -551,6 +626,44 @@
551
626
  "spacing",
552
627
  "4XS"
553
628
  ]
629
+ },
630
+ "5XS": {
631
+ "value": "0.25",
632
+ "defaultUnit": "rem",
633
+ "filePath": "tokens/spacing/base.json",
634
+ "isSource": true,
635
+ "original": {
636
+ "value": "0.25",
637
+ "defaultUnit": "rem"
638
+ },
639
+ "name": "spacing-5-xs",
640
+ "attributes": {
641
+ "category": "spacing",
642
+ "type": "5XS"
643
+ },
644
+ "path": [
645
+ "spacing",
646
+ "5XS"
647
+ ]
648
+ },
649
+ "6XS": {
650
+ "value": "0.125",
651
+ "defaultUnit": "rem",
652
+ "filePath": "tokens/spacing/base.json",
653
+ "isSource": true,
654
+ "original": {
655
+ "value": "0.125",
656
+ "defaultUnit": "rem"
657
+ },
658
+ "name": "spacing-6-xs",
659
+ "attributes": {
660
+ "category": "spacing",
661
+ "type": "6XS"
662
+ },
663
+ "path": [
664
+ "spacing",
665
+ "6XS"
666
+ ]
554
667
  }
555
668
  },
556
669
  "typography": {
@@ -22,6 +22,15 @@ $pds-color-button-brand-border-hover: #ffe668;
22
22
  $pds-color-button-brand-foreground-active: #121219;
23
23
  $pds-color-button-brand-foreground-default: #121219;
24
24
  $pds-color-button-brand-foreground-hover: #121219;
25
+ $pds-color-button-brand-secondary-background-active: #282839;
26
+ $pds-color-button-brand-secondary-background-default: rgba(0, 0, 0, 0);
27
+ $pds-color-button-brand-secondary-background-hover: #504e62;
28
+ $pds-color-button-brand-secondary-border-active: #504e62;
29
+ $pds-color-button-brand-secondary-border-default: #a6a3b4;
30
+ $pds-color-button-brand-secondary-border-hover: #ffffff;
31
+ $pds-color-button-brand-secondary-foreground-active: #e7e7eb;
32
+ $pds-color-button-brand-secondary-foreground-default: #e7e7eb;
33
+ $pds-color-button-brand-secondary-foreground-hover: #ffffff;
25
34
  $pds-color-button-critical-background-active: #9c2f2f;
26
35
  $pds-color-button-critical-background-default: #e05757;
27
36
  $pds-color-button-critical-background-hover: #be4242;
@@ -61,15 +70,32 @@ $pds-color-gradient-after-hours: linear-gradient(228.64deg, #2B017B 41.87%, #29B
61
70
  $pds-color-gradient-midnight: linear-gradient(228.64deg, #3017A1 46.34%, #00E0C3 100%);
62
71
  $pds-color-gradient-sunrise: linear-gradient(227.79deg, #300068 38.28%, #E65F35 100%);
63
72
  $pds-color-gradient-sunset: linear-gradient(48.24deg, #EF13AD 0%, #300068 66.25%);
73
+ $pds-color-input-action-background-hover: #504e62;
74
+ $pds-color-input-background-critical: #1d1d29;
64
75
  $pds-color-input-background-default: #1d1d29;
65
- $pds-color-input-background-disabled: #504e62;
66
- $pds-color-input-border-default: $pds-color-border-default;
67
- $pds-color-input-border-disabled: #858299;
76
+ $pds-color-input-background-hover: #282839;
77
+ $pds-color-input-border-critical: #e05757;
78
+ $pds-color-input-border-default: #a6a3b4;
79
+ $pds-color-input-border-hover: #7657ff;
80
+ $pds-color-input-border-success: #3cb683;
81
+ $pds-color-input-checked-background: $pds-color-interactive-focus;
82
+ $pds-color-input-checked-foreground: #ffffff;
83
+ $pds-color-input-foreground-critical: #e05757;
84
+ $pds-color-input-foreground-default: #ffffff;
85
+ $pds-color-input-foreground-success: #3cb683;
86
+ $pds-color-input-placeholder-text: #a6a3b4;
68
87
  $pds-color-interactive-focus: #36a3ff;
69
- $pds-color-link-active: #2776b9;
88
+ $pds-color-link-active: #5f41e5;
70
89
  $pds-color-link-default: #36a3ff;
71
- $pds-color-link-hover: #2776b9;
72
- $pds-color-link-visited: #967fff;
90
+ $pds-color-link-hover: #5f41e5;
91
+ $pds-color-link-visited: #5f41e5;
92
+ $pds-color-menu-background: #282839;
93
+ $pds-color-menu-item-background-active: #858299;
94
+ $pds-color-menu-item-background-default: #282839;
95
+ $pds-color-menu-item-background-hover: #504e62;
96
+ $pds-color-menu-item-description-text: #a6a3b4;
97
+ $pds-color-menu-item-foreground: #ffffff;
98
+ $pds-color-menu-item-heading-text: #a6a3b4;
73
99
  $pds-color-panel-default-background: $pds-color-background-default;
74
100
  $pds-color-panel-default-border: $pds-color-border-default;
75
101
  $pds-color-panel-overlay-background: #282839;
@@ -79,10 +105,11 @@ $pds-color-panel-raised-border: $pds-color-border-default;
79
105
  $pds-color-panel-sunken-background: #121219;
80
106
  $pds-color-panel-sunken-border: #121219;
81
107
  $pds-color-text-default: #ffffff;
108
+ $pds-color-text-default-secondary: #a6a3b4;
82
109
  $pds-color-text-headings: $pds-color-text-default;
83
- $pds-color-text-lead: #858299;
84
- $pds-color-text-overline: #858299;
110
+ $pds-color-text-lead: $pds-color-text-default-secondary;
111
+ $pds-color-text-overline: $pds-color-text-default-secondary;
85
112
  $pds-color-text-paragraph: $pds-color-text-default;
86
- $pds-color-text-quote: #858299;
113
+ $pds-color-text-quote: $pds-color-text-default-secondary;
87
114
  $pds-elevation-overlay: 0px 8px 12px 0px rgba(18, 18, 25, 0.6);
88
115
  $pds-elevation-raised: 0px 1px 1px 0px rgba(18, 18, 25, 0.95);
@@ -22,6 +22,15 @@ $pds-color-button-brand-border-hover: #ffe668;
22
22
  $pds-color-button-brand-foreground-active: #23232d;
23
23
  $pds-color-button-brand-foreground-default: #23232d;
24
24
  $pds-color-button-brand-foreground-hover: #23232d;
25
+ $pds-color-button-brand-secondary-background-active: #cfcfd3;
26
+ $pds-color-button-brand-secondary-background-default: rgba(0, 0, 0, 0);
27
+ $pds-color-button-brand-secondary-background-hover: #f1f1f1;
28
+ $pds-color-button-brand-secondary-border-active: #23232d;
29
+ $pds-color-button-brand-secondary-border-default: #54545f;
30
+ $pds-color-button-brand-secondary-border-hover: #23232d;
31
+ $pds-color-button-brand-secondary-foreground-active: #23232d;
32
+ $pds-color-button-brand-secondary-foreground-default: #23232d;
33
+ $pds-color-button-brand-secondary-foreground-hover: #23232d;
25
34
  $pds-color-button-critical-background-active: #700000;
26
35
  $pds-color-button-critical-background-default: #d61f1f;
27
36
  $pds-color-button-critical-background-hover: #f83333;
@@ -33,23 +42,23 @@ $pds-color-button-critical-foreground-default: #ffffff;
33
42
  $pds-color-button-critical-foreground-hover: #ffffff;
34
43
  $pds-color-button-primary-background-active: #11005d;
35
44
  $pds-color-button-primary-background-default: #3017a1;
36
- $pds-color-button-primary-background-hover: #785aff;
45
+ $pds-color-button-primary-background-hover: #5f41e5;
37
46
  $pds-color-button-primary-border-active: #11005d;
38
47
  $pds-color-button-primary-border-default: #3017a1;
39
- $pds-color-button-primary-border-hover: #785aff;
48
+ $pds-color-button-primary-border-hover: #5f41e5;
40
49
  $pds-color-button-primary-foreground-active: #ffffff;
41
50
  $pds-color-button-primary-foreground-default: #ffffff;
42
51
  $pds-color-button-primary-foreground-hover: #ffffff;
43
- $pds-color-button-secondary-background-active: #cfcfd3;
52
+ $pds-color-button-secondary-background-active: #e5dbff;
44
53
  $pds-color-button-secondary-background-default: rgba(0, 0, 0, 0);
45
54
  $pds-color-button-secondary-background-hover: #f0ecff;
46
55
  $pds-color-button-secondary-border-active: #11005d;
47
56
  $pds-color-button-secondary-border-default: #3017a1;
48
- $pds-color-button-secondary-border-hover: #785aff;
57
+ $pds-color-button-secondary-border-hover: #5f41e5;
49
58
  $pds-color-button-secondary-foreground-active: #11005d;
50
59
  $pds-color-button-secondary-foreground-default: #3017a1;
51
60
  $pds-color-button-secondary-foreground-hover: #3017a1;
52
- $pds-color-button-subtle-background-active: #cfcfd3;
61
+ $pds-color-button-subtle-background-active: #e5dbff;
53
62
  $pds-color-button-subtle-background-default: rgba(0, 0, 0, 0);
54
63
  $pds-color-button-subtle-background-hover: #f0ecff;
55
64
  $pds-color-button-subtle-border-default: rgba(0, 0, 0, 0);
@@ -61,15 +70,32 @@ $pds-color-gradient-after-hours: linear-gradient(228.64deg, #2B017B 41.87%, #29B
61
70
  $pds-color-gradient-midnight: linear-gradient(228.64deg, #3017A1 46.34%, #00E0C3 100%);
62
71
  $pds-color-gradient-sunrise: linear-gradient(227.79deg, #300068 38.28%, #E65F35 100%);
63
72
  $pds-color-gradient-sunset: linear-gradient(48.24deg, #EF13AD 0%, #300068 66.25%);
73
+ $pds-color-input-action-background-hover: #f1f1f1;
74
+ $pds-color-input-background-critical: #ffebeb;
64
75
  $pds-color-input-background-default: #ffffff;
65
- $pds-color-input-background-disabled: #cfcfd3;
66
- $pds-color-input-border-default: $pds-color-border-default;
67
- $pds-color-input-border-disabled: #aeaeb6;
76
+ $pds-color-input-background-hover: #f0ecff;
77
+ $pds-color-input-border-critical: #d61f1f;
78
+ $pds-color-input-border-default: #8f8f99;
79
+ $pds-color-input-border-hover: #5f41e5;
80
+ $pds-color-input-border-success: #1f845a;
81
+ $pds-color-input-checked-background: $pds-color-interactive-focus;
82
+ $pds-color-input-checked-foreground: #ffffff;
83
+ $pds-color-input-foreground-critical: #d61f1f;
84
+ $pds-color-input-foreground-default: #23232d;
85
+ $pds-color-input-foreground-success: #1f845a;
86
+ $pds-color-input-placeholder-text: #71717c;
68
87
  $pds-color-interactive-focus: #0f62fe;
69
- $pds-color-link-active: #003cac;
88
+ $pds-color-link-active: #5f41e5;
70
89
  $pds-color-link-default: #0f62fe;
71
- $pds-color-link-hover: #003cac;
72
- $pds-color-link-visited: #967fff;
90
+ $pds-color-link-hover: #5f41e5;
91
+ $pds-color-link-visited: #5f41e5;
92
+ $pds-color-menu-background: #ffffff;
93
+ $pds-color-menu-item-background-active: #cfcfd3;
94
+ $pds-color-menu-item-background-default: #ffffff;
95
+ $pds-color-menu-item-background-hover: #f1f1f1;
96
+ $pds-color-menu-item-description-text: #71717c;
97
+ $pds-color-menu-item-foreground: #23232d;
98
+ $pds-color-menu-item-heading-text: #71717c;
73
99
  $pds-color-panel-default-background: $pds-color-background-default;
74
100
  $pds-color-panel-default-border: $pds-color-border-default;
75
101
  $pds-color-panel-overlay-background: $pds-color-background-default;
@@ -79,10 +105,11 @@ $pds-color-panel-raised-border: $pds-color-border-default;
79
105
  $pds-color-panel-sunken-background: #f1f1f1;
80
106
  $pds-color-panel-sunken-border: #f1f1f1;
81
107
  $pds-color-text-default: #23232d;
108
+ $pds-color-text-default-secondary: #71717c;
82
109
  $pds-color-text-headings: $pds-color-text-default;
83
- $pds-color-text-lead: #71717c;
84
- $pds-color-text-overline: #71717c;
110
+ $pds-color-text-lead: $pds-color-text-default-secondary;
111
+ $pds-color-text-overline: $pds-color-text-default-secondary;
85
112
  $pds-color-text-paragraph: #23232d;
86
- $pds-color-text-quote: #71717c;
113
+ $pds-color-text-quote: $pds-color-text-default-secondary;
87
114
  $pds-elevation-overlay: 0px 8px 12px 0px rgba(113, 113, 124, 0.25), 0px 0px 1px 0px rgba(18, 18, 25, 0.25);
88
115
  $pds-elevation-raised: 0px 1px 1px 0px #aeaeb6, 0px 0px 1px 0px rgba(18, 18, 25, 0.25);
@@ -8,9 +8,10 @@
8
8
  //
9
9
  // This file has been generated automatically.
10
10
 
11
- $pds-animation-transition-delay: 0s;
12
- $pds-animation-transition-duration: 200ms;
13
- $pds-animation-transition-timing-function: ease-in-out;
11
+ $pds-animation-transition-default-delay: 0s;
12
+ $pds-animation-transition-default-duration: 200ms;
13
+ $pds-animation-transition-default-timing-function: ease-in-out;
14
+ $pds-animation-transition-dropdown-duration: 300ms;
14
15
  $pds-border-radius-default: 0.1875rem;
15
16
  $pds-border-width-default: 1px;
16
17
  $pds-typography-font-default: 'Poppins', sans-serif;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pantheon-systems/pds-design-tokens",
3
- "version": "1.0.0-dev.2",
3
+ "version": "1.0.0-dev.20",
4
4
  "description": "Design Tokens for the Pantheon Design System",
5
5
  "homepage": "https://pantheon.io",
6
6
  "keywords": [