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

package/README.md

@@ -4,10 +4,43 @@ 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`
+  - `build/json/pds-design-tokens-light-mode.json`
+  - `build/json/pds-design-tokens-dark-mode.json`
+- Figma (formatted to sync to Figma styles)
+  - `build/figma/pds-design-tokens-figma.json`
+
+## Technology Agnostic
+
+Design tokens are specifically intended for the purpose of design and will be translated into various technical formats as needed.
+
+By default, tokens values should be unitless unless that unit is universal (such as percentages). Many PDS design tokens will be assigned a default unit type under the hood, but those unit designations will only be provided for the output formats where appropriate.
+
+For example, CSS and SCSS variable tokens will be output with unit-specific values. While JSON output tokens will always be unitless. However, if a default unit is assigned it will be available via the `defaultUnit` key for any token object.
+
+## Public and Private Tokens
+
+All tokens are considered private unless specifically designated as public. All tokens may be accessed via JSON token files, but only public tokens will be output to CSS and SCSS stylesheets.
+
+We typically only designate tokens as public when they need to be available to override for theming purposes such as switching between light and dark mode or for other custom themes.
+
+## 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-foreground-default: #ffffff;
+  --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-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-foreground-default: #23232d;
+  --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-default: #23232d;
+  --pds-color-text-headings: var(--pds-color-text-default);
+}

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

@@ -0,0 +1,26 @@
+/**
+ * 
+ * Pantheon Systems
+ * 
+ * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+ * !! DO NOT EDIT THIS FILE DIRECTLY !!
+ * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+ * 
+ * This file has been generated automatically.
+ */
+
+:root {
+  --pds-border-radius-default: 0.25rem;
+  --pds-border-width-default: 1px;
+  --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%);
+  --pds-typography-product-font-headings: 'Poppins', sans-serif;
+  --pds-typography-product-font-text: 'Open Sans', sans-serif;
+  --pds-typography-product-marketing-font-headings: 'Poppins', sans-serif;
+  --pds-typography-product-marketing-font-text: 'Aleo', serif;
+}