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

package/README.md

@@ -4,10 +4,27 @@ Design Tokens for the Pantheon Design System
 
 The repository uses [Style Dictionary](https://amzn.github.io/style-dictionary) as its foundational framework.
 
-To build the various artifacts/files simply run:
+Compiled tokens can be found in the `build` directory.
 
-```bash
-npm run tokens:build
-```
+## Output Types
 
-The above command will generate CSS (custom properties), SCSS (Sass), and JSON files.
+PDS Design Tokens are provided in the following formats:
+
+- CSS Custom Properties
+  - `build/css/pds-design-tokens.css`
+  - `build/css/pds-design-tokens-light-mode.css`
+  - `build/css/pds-design-tokens-dark-mode.css`
+- SASS Variables
+  - `build/scss/_pds-design-tokens.scss`
+  - `build/scss/_pds-design-tokens-light-mode.scss`
+  - `build/scss/_pds-design-tokens-dark-mode.scss`
+- JSON
+  - `build/json/pds-design-tokens.json`
+- Figma (formatted to sync to Figma styles)
+  - `build/figma/pds-design-tokens-figma.json`
+
+## Color Modes
+
+All global color values are found within the default output files which should be loaded at all times.
+
+Mode-specific (light or dark) color tokens are found within theme-specific CSS and SCSS variable files and are to be used in conjunction with (and loaded after) the default tokens implementation files.

package/build/css/pds-design-tokens-dark-mode.css

@@ -0,0 +1,26 @@
+/**
+ * 
+ * Pantheon Systems
+ * 
+ * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+ * !! DO NOT EDIT THIS FILE DIRECTLY !!
+ * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+ * 
+ * This file has been generated automatically.
+ */
+
+:root {
+  --pds-color-background-default: #1d1d29;
+  --pds-color-border-default: #504e62;
+  --pds-color-input-background-default: #1d1d29;
+  --pds-color-input-background-disabled: #504e62;
+  --pds-color-input-border-default: var(--pds-color-border-default);
+  --pds-color-input-border-disabled: #858299;
+  --pds-color-link-active: #2776b9;
+  --pds-color-link-default: #36a3ff;
+  --pds-color-link-hover: #2776b9;
+  --pds-color-link-visited: #967fff;
+  --pds-color-text-bodytext: var(--pds-color-text-default);
+  --pds-color-text-default: #ffffff;
+  --pds-color-text-headings: var(--pds-color-text-default);
+}

package/build/css/pds-design-tokens-light-mode.css

@@ -0,0 +1,26 @@
+/**
+ * 
+ * Pantheon Systems
+ * 
+ * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+ * !! DO NOT EDIT THIS FILE DIRECTLY !!
+ * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+ * 
+ * This file has been generated automatically.
+ */
+
+:root {
+  --pds-color-background-default: #ffffff;
+  --pds-color-border-default: #71717c;
+  --pds-color-input-background-default: #ffffff;
+  --pds-color-input-background-disabled: #cfcfd3;
+  --pds-color-input-border-default: var(--pds-color-border-default);
+  --pds-color-input-border-disabled: #aeaeb6;
+  --pds-color-link-active: #003cac;
+  --pds-color-link-default: #0f62fe;
+  --pds-color-link-hover: #003cac;
+  --pds-color-link-visited: #967fff;
+  --pds-color-text-bodytext: var(--pds-color-text-default);
+  --pds-color-text-default: #23232d;
+  --pds-color-text-headings: var(--pds-color-text-default);
+}

package/build/css/pds-design-tokens.css

@@ -0,0 +1,20 @@
+/**
+ * 
+ * Pantheon Systems
+ * 
+ * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+ * !! DO NOT EDIT THIS FILE DIRECTLY !!
+ * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+ * 
+ * This file has been generated automatically.
+ */
+
+:root {
+  --pds-color-global-brand-accent-default: #de0093;
+  --pds-color-global-brand-primary-default: #ffdc28;
+  --pds-color-global-brand-secondary-default: #3017a1;
+  --pds-color-global-gradient-after-hours: linear-gradient(228.64deg, #2B017B 41.87%, #29B2FF 100%);
+  --pds-color-global-gradient-midnight: linear-gradient(228.64deg, #3017A1 46.34%, #00E0C3 100%);
+  --pds-color-global-gradient-sunrise: linear-gradient(227.79deg, #300068 38.28%, #E65F35 100%);
+  --pds-color-global-gradient-sunset: linear-gradient(48.24deg, #EF13AD 0%, #300068 66.25%);
+}