@pantheon-systems/pds-design-tokens 0.1.0-dev.1

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 (10) hide show
  1. package/LICENSE +674 -0
  2. package/README.md +13 -0
  3. package/build/css/pds-tokens-dark-mode.css +74 -0
  4. package/build/css/pds-tokens.css +74 -0
  5. package/build/figma/pds-tokens-figma.json +4450 -0
  6. package/build/json/pds-tokens-dark-mode.json +1753 -0
  7. package/build/json/pds-tokens.json +3073 -0
  8. package/build/scss/_pds-tokens-dark-mode.scss +71 -0
  9. package/build/scss/_pds-tokens.scss +71 -0
  10. package/package.json +29 -0
package/README.md ADDED
@@ -0,0 +1,13 @@
1
+ # pds-design-tokens
2
+
3
+ Design Tokens for the Pantheon Design System
4
+
5
+ The repository uses [Style Dictionary](https://amzn.github.io/style-dictionary) as its foundational framework.
6
+
7
+ To build the various artifacts/files simply run:
8
+
9
+ ```bash
10
+ npm run tokens:build
11
+ ```
12
+
13
+ The above command will generate CSS (custom properties), SCSS (Sass), and JSON files.
package/build/css/pds-tokens-dark-mode.css ADDED
@@ -0,0 +1,74 @@
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 ADDED
@@ -0,0 +1,74 @@
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
+ }