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

package/README.md

@@ -11,19 +11,9 @@ Compiled tokens can be found in the `build` directory.
 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
 
@@ -43,4 +33,4 @@ We typically only designate tokens as public when they need to be available to o
 
 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.
+Mode-specific (light or dark) color and elevation tokens are found within theme-specific 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

@@ -23,4 +23,7 @@
   --pds-color-link-visited: #967fff;
   --pds-color-text-default: #ffffff;
   --pds-color-text-headings: var(--pds-color-text-default);
+  --pds-color-text-paragraph: var(--pds-color-text-default);
+  --pds-elevation-overlay: 0px, 8px, 12px, 0px, rgba(18, 18, 25, 0.6);
+  --pds-elevation-raised: 0px, 1px, 1px, 0px, rgba(18, 18, 25, 0.95);
 }

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

@@ -23,4 +23,7 @@
   --pds-color-link-visited: #967fff;
   --pds-color-text-default: #23232d;
   --pds-color-text-headings: var(--pds-color-text-default);
+  --pds-color-text-paragraph: #23232d;
+  --pds-elevation-overlay: 0px, 8px, 12px, 0px, rgba(113, 113, 124, 0.25);
+  --pds-elevation-raised: 0px, 1px, 1px, 0px, #aeaeb6;
 }

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

@@ -19,8 +19,5 @@
   --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;
+  --pds-typography-font-default: 'Poppins', sans-serif;
 }