@pantheon-systems/pds-design-tokens 0.1.0-dev.1 → 0.3.0-dev.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.
Files changed (19) hide show
  1. package/README.md +38 -5
  2. package/build/css/pds-design-tokens-dark-mode.css +26 -0
  3. package/build/css/pds-design-tokens-light-mode.css +26 -0
  4. package/build/css/pds-design-tokens.css +26 -0
  5. package/build/figma/pds-design-tokens-figma.json +4229 -0
  6. package/build/json/pds-design-tokens-dark-mode.json +1202 -0
  7. package/build/json/pds-design-tokens-light-mode.json +1202 -0
  8. package/build/json/pds-design-tokens.json +2050 -0
  9. package/build/scss/_pds-design-tokens-dark-mode.scss +23 -0
  10. package/build/scss/_pds-design-tokens-light-mode.scss +23 -0
  11. package/build/scss/_pds-design-tokens.scss +23 -0
  12. package/package.json +7 -2
  13. package/build/css/pds-tokens-dark-mode.css +0 -74
  14. package/build/css/pds-tokens.css +0 -74
  15. package/build/figma/pds-tokens-figma.json +0 -4450
  16. package/build/json/pds-tokens-dark-mode.json +0 -1753
  17. package/build/json/pds-tokens.json +0 -3073
  18. package/build/scss/_pds-tokens-dark-mode.scss +0 -71
  19. package/build/scss/_pds-tokens.scss +0 -71
package/build/scss/_pds-design-tokens-dark-mode.scss ADDED
@@ -0,0 +1,23 @@
1
+
2
+ //
3
+ // Pantheon Systems
4
+ //
5
+ // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
6
+ // !! DO NOT EDIT THIS FILE DIRECTLY !!
7
+ // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
8
+ //
9
+ // This file has been generated automatically.
10
+
11
+ $pds-color-background-default: #1d1d29;
12
+ $pds-color-border-default: #504e62;
13
+ $pds-color-foreground-default: #ffffff;
14
+ $pds-color-input-background-default: #1d1d29;
15
+ $pds-color-input-background-disabled: #504e62;
16
+ $pds-color-input-border-default: $pds-color-border-default;
17
+ $pds-color-input-border-disabled: #858299;
18
+ $pds-color-link-active: #2776b9;
19
+ $pds-color-link-default: #36a3ff;
20
+ $pds-color-link-hover: #2776b9;
21
+ $pds-color-link-visited: #967fff;
22
+ $pds-color-text-default: #ffffff;
23
+ $pds-color-text-headings: $pds-color-text-default;
package/build/scss/_pds-design-tokens-light-mode.scss ADDED
@@ -0,0 +1,23 @@
1
+
2
+ //
3
+ // Pantheon Systems
4
+ //
5
+ // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
6
+ // !! DO NOT EDIT THIS FILE DIRECTLY !!
7
+ // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
8
+ //
9
+ // This file has been generated automatically.
10
+
11
+ $pds-color-background-default: #ffffff;
12
+ $pds-color-border-default: #71717c;
13
+ $pds-color-foreground-default: #23232d;
14
+ $pds-color-input-background-default: #ffffff;
15
+ $pds-color-input-background-disabled: #cfcfd3;
16
+ $pds-color-input-border-default: $pds-color-border-default;
17
+ $pds-color-input-border-disabled: #aeaeb6;
18
+ $pds-color-link-active: #003cac;
19
+ $pds-color-link-default: #0f62fe;
20
+ $pds-color-link-hover: #003cac;
21
+ $pds-color-link-visited: #967fff;
22
+ $pds-color-text-default: #23232d;
23
+ $pds-color-text-headings: $pds-color-text-default;
package/build/scss/_pds-design-tokens.scss ADDED
@@ -0,0 +1,23 @@
1
+
2
+ //
3
+ // Pantheon Systems
4
+ //
5
+ // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
6
+ // !! DO NOT EDIT THIS FILE DIRECTLY !!
7
+ // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
8
+ //
9
+ // This file has been generated automatically.
10
+
11
+ $pds-border-radius-default: 0.25rem;
12
+ $pds-border-width-default: 1px;
13
+ $pds-color-global-brand-accent-default: #de0093;
14
+ $pds-color-global-brand-primary-default: #ffdc28;
15
+ $pds-color-global-brand-secondary-default: #3017a1;
16
+ $pds-color-global-gradient-after-hours: linear-gradient(228.64deg, #2B017B 41.87%, #29B2FF 100%);
17
+ $pds-color-global-gradient-midnight: linear-gradient(228.64deg, #3017A1 46.34%, #00E0C3 100%);
18
+ $pds-color-global-gradient-sunrise: linear-gradient(227.79deg, #300068 38.28%, #E65F35 100%);
19
+ $pds-color-global-gradient-sunset: linear-gradient(48.24deg, #EF13AD 0%, #300068 66.25%);
20
+ $pds-typography-product-font-headings: 'Poppins', sans-serif;
21
+ $pds-typography-product-font-text: 'Open Sans', sans-serif;
22
+ $pds-typography-product-marketing-font-headings: 'Poppins', sans-serif;
23
+ $pds-typography-product-marketing-font-text: 'Aleo', serif;
package/package.json CHANGED
@@ -1,7 +1,13 @@
1
1
  {
2
2
  "name": "@pantheon-systems/pds-design-tokens",
3
- "version": "0.1.0-dev.1",
3
+ "version": "0.3.0-dev.0",
4
4
  "description": "Design Tokens for the Pantheon Design System",
5
+ "homepage": "https://pantheon.io",
6
+ "keywords": [
7
+ "Pantheon",
8
+ "Design System",
9
+ "Design Tokens"
10
+ ],
5
11
  "main": "index.js",
6
12
  "files": [
7
13
  "build"
@@ -21,7 +27,6 @@
21
27
  "bugs": {
22
28
  "url": "https://github.com/pantheon-systems/pds-design-tokens/issues"
23
29
  },
24
- "homepage": "https://github.com/pantheon-systems/pds-design-tokens#readme",
25
30
  "devDependencies": {
26
31
  "prettier": "^2.8.3",
27
32
  "style-dictionary": "^3.7.2"
package/build/css/pds-tokens-dark-mode.css DELETED
@@ -1,74 +0,0 @@
1
- /**
2
- *
3
- * Pantheon Systems
4
- *
5
- * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
6
- * !! DO NOT EDIT THIS FILE DIRECTLY !!
7
- * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
8
- *
9
- * This file has been generated automatically.
10
- */
11
-
12
- :root {
13
- --pds-color-accents-secondary: #B6AAF3;
14
- --pds-color-accents-secondary-dark: #907AF0;
15
- --pds-color-accents-tertiary: #FFB3E6;
16
- --pds-color-accents-tertiary-dark: #FF8AD8;
17
- --pds-color-border-default: var(--pds-color-neutrals-dark);
18
- --pds-color-brand-primary: #FFDC28;
19
- --pds-color-brand-primary-dark: #CCB020;
20
- --pds-color-brand-primary-light: #FFF0A0;
21
- --pds-color-input-background-disabled: var(--pds-color-neutrals-medium-light);
22
- --pds-color-input-border-active: var(--pds-color-accents-secondary);
23
- --pds-color-input-border-default: var(--pds-color-neutrals-dark);
24
- --pds-color-input-border-disabled: var(--pds-color-neutrals-medium-dark);
25
- --pds-color-input-border-error: var(--pds-color-status-error);
26
- --pds-color-input-border-focus: var(--pds-color-accents-secondary);
27
- --pds-color-input-border-hover: var(--pds-color-accents-secondary-dark);
28
- --pds-color-input-border-success: var(--pds-color-status-success);
29
- --pds-color-input-checked-background: var(--pds-color-accents-secondary);
30
- --pds-color-input-checked-foreground: var(--pds-color-neutrals-lightest);
31
- --pds-color-input-focus-outline: #127CBB;
32
- --pds-color-input-label-active: var(--pds-color-accents-secondary);
33
- --pds-color-input-label-default: var(--pds-color-text-default);
34
- --pds-color-input-label-disabled: var(--pds-color-text-disabled);
35
- --pds-color-input-label-error: var(--pds-color-status-error);
36
- --pds-color-input-label-focus: var(--pds-color-accents-secondary);
37
- --pds-color-input-label-hover: var(--pds-color-accents-secondary);
38
- --pds-color-input-label-success: var(--pds-color-status-success);
39
- --pds-color-input-message-default: var(--pds-color-neutrals-dark);
40
- --pds-color-input-message-error: var(--pds-color-status-error);
41
- --pds-color-input-message-success: var(--pds-color-status-success);
42
- --pds-color-link-active: var(--pds-color-accents-tertiary-dark);
43
- --pds-color-link-default: #5092D9;
44
- --pds-color-link-hover: var(--pds-color-accents-tertiary);
45
- --pds-color-link-visited: var(--pds-color-accents-secondary);
46
- --pds-color-neutrals-dark: #393359;
47
- --pds-color-neutrals-darker: #25233B;
48
- --pds-color-neutrals-darkest: #1C1B2D;
49
- --pds-color-neutrals-desaturated: #F3F3F3;
50
- --pds-color-neutrals-light: #f6f6f7;
51
- --pds-color-neutrals-lightest: #FFFFFF;
52
- --pds-color-neutrals-medium: #9B9BA3;
53
- --pds-color-neutrals-medium-dark: #777681;
54
- --pds-color-neutrals-medium-light: #D2D1D5;
55
- --pds-color-panel-background: var(--pds-color-neutrals-lightest);
56
- --pds-color-panel-border: var(--pds-color-neutrals-medium);
57
- --pds-color-status-error: #FF4B55;
58
- --pds-color-status-error-dark: #D5353F;
59
- --pds-color-status-error-light: #FFBEC2;
60
- --pds-color-status-info: #82AAE4;
61
- --pds-color-status-info-dark: #2760B0;
62
- --pds-color-status-info-light: #D5E3F6;
63
- --pds-color-status-success: #3DA378;
64
- --pds-color-status-success-dark: #007B48;
65
- --pds-color-status-success-light: #CCE7DC;
66
- --pds-color-status-warning: #FF922D;
67
- --pds-color-status-warning-dark: #995210;
68
- --pds-color-status-warning-light: #FFDEBF;
69
- --pds-color-text-bodycopy: var(--pds-color-text-default);
70
- --pds-color-text-default: var(--pds-color-neutrals-darkest);
71
- --pds-color-text-disabled: var(--pds-color-neutrals-dark);
72
- --pds-color-text-headings: var(--pds-color-text-default);
73
- --pds-color-text-placeholder: var(--pds-color-neutrals-dark);
74
- }
package/build/css/pds-tokens.css DELETED
@@ -1,74 +0,0 @@
1
- /**
2
- *
3
- * Pantheon Systems
4
- *
5
- * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
6
- * !! DO NOT EDIT THIS FILE DIRECTLY !!
7
- * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
8
- *
9
- * This file has been generated automatically.
10
- */
11
-
12
- :root {
13
- --pds-color-accents-secondary: #3017A1;
14
- --pds-color-accents-secondary-dark: #24107B;
15
- --pds-color-accents-tertiary: #DE0093;
16
- --pds-color-accents-tertiary-dark: #92005A;
17
- --pds-color-border-default: var(--pds-color-neutrals-dark);
18
- --pds-color-brand-primary: #FFDC28;
19
- --pds-color-brand-primary-dark: #CCB020;
20
- --pds-color-brand-primary-light: #FFF0A0;
21
- --pds-color-input-background-disabled: var(--pds-color-neutrals-medium-light);
22
- --pds-color-input-border-active: var(--pds-color-accents-secondary);
23
- --pds-color-input-border-default: var(--pds-color-neutrals-dark);
24
- --pds-color-input-border-disabled: var(--pds-color-neutrals-medium-dark);
25
- --pds-color-input-border-error: var(--pds-color-status-error);
26
- --pds-color-input-border-focus: var(--pds-color-accents-secondary);
27
- --pds-color-input-border-hover: var(--pds-color-accents-secondary-dark);
28
- --pds-color-input-border-success: var(--pds-color-status-success);
29
- --pds-color-input-checked-background: var(--pds-color-accents-secondary);
30
- --pds-color-input-checked-foreground: var(--pds-color-neutrals-lightest);
31
- --pds-color-input-focus-outline: #127CBB;
32
- --pds-color-input-label-active: var(--pds-color-accents-secondary);
33
- --pds-color-input-label-default: var(--pds-color-text-default);
34
- --pds-color-input-label-disabled: var(--pds-color-text-disabled);
35
- --pds-color-input-label-error: var(--pds-color-status-error);
36
- --pds-color-input-label-focus: var(--pds-color-accents-secondary);
37
- --pds-color-input-label-hover: var(--pds-color-accents-secondary);
38
- --pds-color-input-label-success: var(--pds-color-status-success);
39
- --pds-color-input-message-default: var(--pds-color-neutrals-dark);
40
- --pds-color-input-message-error: var(--pds-color-status-error);
41
- --pds-color-input-message-success: var(--pds-color-status-success);
42
- --pds-color-link-active: var(--pds-color-accents-tertiary-dark);
43
- --pds-color-link-default: #1B70CE;
44
- --pds-color-link-hover: var(--pds-color-accents-tertiary);
45
- --pds-color-link-visited: var(--pds-color-accents-secondary);
46
- --pds-color-neutrals-dark: #6B6B84;
47
- --pds-color-neutrals-darker: #4B4B5D;
48
- --pds-color-neutrals-darkest: #23232D;
49
- --pds-color-neutrals-desaturated: #F3F3F3;
50
- --pds-color-neutrals-light: #FAFAFE;
51
- --pds-color-neutrals-lightest: #FFFFFF;
52
- --pds-color-neutrals-medium: #DFDFEC;
53
- --pds-color-neutrals-medium-dark: #C1C1D6;
54
- --pds-color-neutrals-medium-light: #F4F4FC;
55
- --pds-color-panel-background: var(--pds-color-neutrals-lightest);
56
- --pds-color-panel-border: var(--pds-color-neutrals-medium);
57
- --pds-color-status-error: #9E171F;
58
- --pds-color-status-error-dark: #670006;
59
- --pds-color-status-error-light: #FFEBEC;
60
- --pds-color-status-info: #596BC8;
61
- --pds-color-status-info-dark: #000E89;
62
- --pds-color-status-info-light: #E9F6FF;
63
- --pds-color-status-success: #00864E;
64
- --pds-color-status-success-dark: #015044;
65
- --pds-color-status-success-light: #E4FFF4;
66
- --pds-color-status-warning: #FF6E1D;
67
- --pds-color-status-warning-dark: #4E2B00;
68
- --pds-color-status-warning-light: #FFEFDC;
69
- --pds-color-text-bodycopy: var(--pds-color-text-default);
70
- --pds-color-text-default: var(--pds-color-neutrals-darkest);
71
- --pds-color-text-disabled: var(--pds-color-neutrals-dark);
72
- --pds-color-text-headings: var(--pds-color-text-default);
73
- --pds-color-text-placeholder: var(--pds-color-neutrals-dark);
74
- }