@pantheon-systems/pds-design-tokens 1.0.0-dev.0 → 1.0.0-dev.10

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 (11) hide show
  1. package/build/css/pds-design-tokens-dark-mode.css +31 -13
  2. package/build/css/pds-design-tokens-light-mode.css +27 -9
  3. package/build/css/pds-design-tokens.css +4 -3
  4. package/build/figma/pds-design-tokens-figma.json +1374 -167
  5. package/build/json/pds-design-tokens-dark-mode.json +560 -40
  6. package/build/json/pds-design-tokens-light-mode.json +529 -32
  7. package/build/json/pds-design-tokens.json +106 -52
  8. package/build/scss/_pds-design-tokens-dark-mode.scss +31 -13
  9. package/build/scss/_pds-design-tokens-light-mode.scss +27 -9
  10. package/build/scss/_pds-design-tokens.scss +4 -3
  11. package/package.json +1 -1
package/build/json/pds-design-tokens.json CHANGED
@@ -1,68 +1,122 @@
1
1
  {
2
2
  "animation": {
3
- "transition": {
4
- "delay": {
5
- "value": "0s",
6
- "public": true,
7
- "filePath": "tokens/animation/base.json",
3
+ "button": {
4
+ "transition": {
5
+ "value": "background-color: 200ms ease-in-out 0s, border-color: 200ms ease-in-out 0s",
6
+ "filePath": "tokens/animation/alias.json",
8
7
  "isSource": true,
9
8
  "original": {
10
- "value": "0s",
11
- "public": true
9
+ "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}"
12
10
  },
13
- "name": "animation-transition-delay",
11
+ "name": "animation-button-transition",
14
12
  "attributes": {
15
13
  "category": "animation",
16
- "type": "transition",
17
- "item": "delay"
14
+ "type": "button",
15
+ "item": "transition"
18
16
  },
19
17
  "path": [
20
18
  "animation",
21
- "transition",
22
- "delay"
19
+ "button",
20
+ "transition"
23
21
  ]
24
- },
25
- "duration": {
26
- "value": "200ms",
27
- "public": true,
28
- "filePath": "tokens/animation/base.json",
29
- "isSource": true,
30
- "original": {
22
+ }
23
+ },
24
+ "transition": {
25
+ "default": {
26
+ "delay": {
27
+ "value": "0s",
28
+ "public": true,
29
+ "filePath": "tokens/animation/base.json",
30
+ "isSource": true,
31
+ "original": {
32
+ "value": "0s",
33
+ "public": true
34
+ },
35
+ "name": "animation-transition-default-delay",
36
+ "attributes": {
37
+ "category": "animation",
38
+ "type": "transition",
39
+ "item": "default",
40
+ "subitem": "delay"
41
+ },
42
+ "path": [
43
+ "animation",
44
+ "transition",
45
+ "default",
46
+ "delay"
47
+ ]
48
+ },
49
+ "duration": {
31
50
  "value": "200ms",
32
- "public": true
33
- },
34
- "name": "animation-transition-duration",
35
- "attributes": {
36
- "category": "animation",
37
- "type": "transition",
38
- "item": "duration"
39
- },
40
- "path": [
41
- "animation",
42
- "transition",
43
- "duration"
44
- ]
45
- },
46
- "timing-function": {
47
- "value": "ease-in-out",
48
- "public": true,
49
- "filePath": "tokens/animation/base.json",
50
- "isSource": true,
51
- "original": {
51
+ "public": true,
52
+ "filePath": "tokens/animation/base.json",
53
+ "isSource": true,
54
+ "original": {
55
+ "value": "200ms",
56
+ "public": true
57
+ },
58
+ "name": "animation-transition-default-duration",
59
+ "attributes": {
60
+ "category": "animation",
61
+ "type": "transition",
62
+ "item": "default",
63
+ "subitem": "duration"
64
+ },
65
+ "path": [
66
+ "animation",
67
+ "transition",
68
+ "default",
69
+ "duration"
70
+ ]
71
+ },
72
+ "timing-function": {
52
73
  "value": "ease-in-out",
53
- "public": true
54
- },
55
- "name": "animation-transition-timing-function",
56
- "attributes": {
57
- "category": "animation",
58
- "type": "transition",
59
- "item": "timing-function"
60
- },
61
- "path": [
62
- "animation",
63
- "transition",
64
- "timing-function"
65
- ]
74
+ "public": true,
75
+ "filePath": "tokens/animation/base.json",
76
+ "isSource": true,
77
+ "original": {
78
+ "value": "ease-in-out",
79
+ "public": true
80
+ },
81
+ "name": "animation-transition-default-timing-function",
82
+ "attributes": {
83
+ "category": "animation",
84
+ "type": "transition",
85
+ "item": "default",
86
+ "subitem": "timing-function"
87
+ },
88
+ "path": [
89
+ "animation",
90
+ "transition",
91
+ "default",
92
+ "timing-function"
93
+ ]
94
+ }
95
+ },
96
+ "dropdown": {
97
+ "duration": {
98
+ "value": "300ms",
99
+ "public": true,
100
+ "filePath": "tokens/animation/base.json",
101
+ "isSource": true,
102
+ "original": {
103
+ "value": "300ms",
104
+ "public": true
105
+ },
106
+ "name": "animation-transition-dropdown-duration",
107
+ "attributes": {
108
+ "category": "animation",
109
+ "type": "transition",
110
+ "item": "dropdown",
111
+ "subitem": "duration"
112
+ },
113
+ "path": [
114
+ "animation",
115
+ "transition",
116
+ "dropdown",
117
+ "duration"
118
+ ]
119
+ }
66
120
  }
67
121
  }
68
122
  },
package/build/scss/_pds-design-tokens-dark-mode.scss CHANGED
@@ -12,7 +12,7 @@ $pds-color-background-default: #1d1d29;
12
12
  $pds-color-border-default: #504e62;
13
13
  $pds-color-brand-accent-default: #de0093;
14
14
  $pds-color-brand-primary-default: #ffdc28;
15
- $pds-color-brand-secondary-default: #785aff;
15
+ $pds-color-brand-secondary-default: #6947ff;
16
16
  $pds-color-button-brand-background-active: #ddbd16;
17
17
  $pds-color-button-brand-background-default: #ffdc28;
18
18
  $pds-color-button-brand-background-hover: #ffe668;
@@ -31,12 +31,12 @@ $pds-color-button-critical-border-hover: #be4242;
31
31
  $pds-color-button-critical-foreground-active: #ffffff;
32
32
  $pds-color-button-critical-foreground-default: #ffffff;
33
33
  $pds-color-button-critical-foreground-hover: #ffffff;
34
- $pds-color-button-primary-background-active: #785aff;
35
- $pds-color-button-primary-background-default: #967fff;
36
- $pds-color-button-primary-background-hover: #b5a4ff;
37
- $pds-color-button-primary-border-active: #785aff;
38
- $pds-color-button-primary-border-default: #967fff;
39
- $pds-color-button-primary-border-hover: #b5a4ff;
34
+ $pds-color-button-primary-background-active: #4b32bb;
35
+ $pds-color-button-primary-background-default: #6947ff;
36
+ $pds-color-button-primary-background-hover: #7657ff;
37
+ $pds-color-button-primary-border-active: #4b32bb;
38
+ $pds-color-button-primary-border-default: #6947ff;
39
+ $pds-color-button-primary-border-hover: #7657ff;
40
40
  $pds-color-button-primary-foreground-active: #ffffff;
41
41
  $pds-color-button-primary-foreground-default: #ffffff;
42
42
  $pds-color-button-primary-foreground-hover: #ffffff;
@@ -61,15 +61,33 @@ $pds-color-gradient-after-hours: linear-gradient(228.64deg, #2B017B 41.87%, #29B
61
61
  $pds-color-gradient-midnight: linear-gradient(228.64deg, #3017A1 46.34%, #00E0C3 100%);
62
62
  $pds-color-gradient-sunrise: linear-gradient(227.79deg, #300068 38.28%, #E65F35 100%);
63
63
  $pds-color-gradient-sunset: linear-gradient(48.24deg, #EF13AD 0%, #300068 66.25%);
64
+ $pds-color-input-background-active: #1d1d29;
65
+ $pds-color-input-background-critical: #1d1d29;
64
66
  $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;
67
+ $pds-color-input-background-hover: #282839;
68
+ $pds-color-input-background-success: #1d1d29;
69
+ $pds-color-input-border-active: #858299;
70
+ $pds-color-input-border-critical: #e05757;
71
+ $pds-color-input-border-default: #a6a3b4;
72
+ $pds-color-input-border-hover: #858299;
73
+ $pds-color-input-border-success: #22a06b;
74
+ $pds-color-input-foreground-active: #ffffff;
75
+ $pds-color-input-foreground-critical: #e05757;
76
+ $pds-color-input-foreground-default: #ffffff;
77
+ $pds-color-input-foreground-hover: #ffffff;
78
+ $pds-color-input-foreground-success: #22a06b;
68
79
  $pds-color-interactive-focus: #36a3ff;
69
80
  $pds-color-link-active: #2776b9;
70
81
  $pds-color-link-default: #36a3ff;
71
82
  $pds-color-link-hover: #2776b9;
72
83
  $pds-color-link-visited: #967fff;
84
+ $pds-color-menu-background: #282839;
85
+ $pds-color-menu-item-background-active: #858299;
86
+ $pds-color-menu-item-background-default: #282839;
87
+ $pds-color-menu-item-background-hover: #504e62;
88
+ $pds-color-menu-item-description-text: #a6a3b4;
89
+ $pds-color-menu-item-foreground: #ffffff;
90
+ $pds-color-menu-item-heading-text: #a6a3b4;
73
91
  $pds-color-panel-default-background: $pds-color-background-default;
74
92
  $pds-color-panel-default-border: $pds-color-border-default;
75
93
  $pds-color-panel-overlay-background: #282839;
@@ -80,9 +98,9 @@ $pds-color-panel-sunken-background: #121219;
80
98
  $pds-color-panel-sunken-border: #121219;
81
99
  $pds-color-text-default: #ffffff;
82
100
  $pds-color-text-headings: $pds-color-text-default;
83
- $pds-color-text-lead: #858299;
84
- $pds-color-text-overline: #858299;
101
+ $pds-color-text-lead: #a6a3b4;
102
+ $pds-color-text-overline: #a6a3b4;
85
103
  $pds-color-text-paragraph: $pds-color-text-default;
86
- $pds-color-text-quote: #858299;
104
+ $pds-color-text-quote: #a6a3b4;
87
105
  $pds-elevation-overlay: 0px 8px 12px 0px rgba(18, 18, 25, 0.6);
88
106
  $pds-elevation-raised: 0px 1px 1px 0px rgba(18, 18, 25, 0.95);
package/build/scss/_pds-design-tokens-light-mode.scss CHANGED
@@ -33,25 +33,25 @@ $pds-color-button-critical-foreground-default: #ffffff;
33
33
  $pds-color-button-critical-foreground-hover: #ffffff;
34
34
  $pds-color-button-primary-background-active: #11005d;
35
35
  $pds-color-button-primary-background-default: #3017a1;
36
- $pds-color-button-primary-background-hover: #785aff;
36
+ $pds-color-button-primary-background-hover: #5f41e5;
37
37
  $pds-color-button-primary-border-active: #11005d;
38
38
  $pds-color-button-primary-border-default: #3017a1;
39
- $pds-color-button-primary-border-hover: #785aff;
39
+ $pds-color-button-primary-border-hover: #5f41e5;
40
40
  $pds-color-button-primary-foreground-active: #ffffff;
41
41
  $pds-color-button-primary-foreground-default: #ffffff;
42
42
  $pds-color-button-primary-foreground-hover: #ffffff;
43
- $pds-color-button-secondary-background-active: #cfcfd3;
43
+ $pds-color-button-secondary-background-active: #e5dbff;
44
44
  $pds-color-button-secondary-background-default: rgba(0, 0, 0, 0);
45
45
  $pds-color-button-secondary-background-hover: #f0ecff;
46
46
  $pds-color-button-secondary-border-active: #11005d;
47
47
  $pds-color-button-secondary-border-default: #3017a1;
48
- $pds-color-button-secondary-border-hover: #785aff;
48
+ $pds-color-button-secondary-border-hover: #5f41e5;
49
49
  $pds-color-button-secondary-foreground-active: #11005d;
50
50
  $pds-color-button-secondary-foreground-default: #3017a1;
51
51
  $pds-color-button-secondary-foreground-hover: #3017a1;
52
- $pds-color-button-subtle-background-active: #cfcfd3;
52
+ $pds-color-button-subtle-background-active: #e5dbff;
53
53
  $pds-color-button-subtle-background-default: rgba(0, 0, 0, 0);
54
- $pds-color-button-subtle-background-hover: #f1f1f1;
54
+ $pds-color-button-subtle-background-hover: #f0ecff;
55
55
  $pds-color-button-subtle-border-default: rgba(0, 0, 0, 0);
56
56
  $pds-color-button-subtle-foreground-active: #11005d;
57
57
  $pds-color-button-subtle-foreground-default: #3017a1;
@@ -61,15 +61,33 @@ $pds-color-gradient-after-hours: linear-gradient(228.64deg, #2B017B 41.87%, #29B
61
61
  $pds-color-gradient-midnight: linear-gradient(228.64deg, #3017A1 46.34%, #00E0C3 100%);
62
62
  $pds-color-gradient-sunrise: linear-gradient(227.79deg, #300068 38.28%, #E65F35 100%);
63
63
  $pds-color-gradient-sunset: linear-gradient(48.24deg, #EF13AD 0%, #300068 66.25%);
64
+ $pds-color-input-background-active: #ffffff;
65
+ $pds-color-input-background-critical: #ffebeb;
64
66
  $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;
67
+ $pds-color-input-background-hover: #f0ecff;
68
+ $pds-color-input-background-success: #ffffff;
69
+ $pds-color-input-border-active: #5f41e5;
70
+ $pds-color-input-border-critical: #d61f1f;
71
+ $pds-color-input-border-default: #8f8f99;
72
+ $pds-color-input-border-hover: #5f41e5;
73
+ $pds-color-input-border-success: #1f845a;
74
+ $pds-color-input-foreground-active: #23232d;
75
+ $pds-color-input-foreground-critical: #d61f1f;
76
+ $pds-color-input-foreground-default: #23232d;
77
+ $pds-color-input-foreground-hover: #23232d;
78
+ $pds-color-input-foreground-success: #1f845a;
68
79
  $pds-color-interactive-focus: #0f62fe;
69
80
  $pds-color-link-active: #003cac;
70
81
  $pds-color-link-default: #0f62fe;
71
82
  $pds-color-link-hover: #003cac;
72
83
  $pds-color-link-visited: #967fff;
84
+ $pds-color-menu-background: #ffffff;
85
+ $pds-color-menu-item-background-active: #cfcfd3;
86
+ $pds-color-menu-item-background-default: #ffffff;
87
+ $pds-color-menu-item-background-hover: #f1f1f1;
88
+ $pds-color-menu-item-description-text: #71717c;
89
+ $pds-color-menu-item-foreground: #23232d;
90
+ $pds-color-menu-item-heading-text: #71717c;
73
91
  $pds-color-panel-default-background: $pds-color-background-default;
74
92
  $pds-color-panel-default-border: $pds-color-border-default;
75
93
  $pds-color-panel-overlay-background: $pds-color-background-default;
package/build/scss/_pds-design-tokens.scss CHANGED
@@ -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.0",
3
+ "version": "1.0.0-dev.10",
4
4
  "description": "Design Tokens for the Pantheon Design System",
5
5
  "homepage": "https://pantheon.io",
6
6
  "keywords": [