🔖Prepare release for eds-tokens@0.9.1 (#2843)

* ✨ Changes related to #2840 (typography vars) * 📝 Updated changelog * 🔖 bump version * 📸 Update snapshots * update date
equinor · Apr 12, 2023 · e6f8b83 · e6f8b83
1 parent 396ed59
commit e6f8b83
Show file tree

Hide file tree

Showing 22 changed files with 156 additions and 142 deletions.
diff --git a/packages/eds-core-react/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap b/packages/eds-core-react/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap
@@ -33,13 +33,13 @@ exports[`Accordion Matches snapshot 1`] = `
   justify-content: space-between;
   background-color: var(--eds_ui_background__default,rgba(255,255,255,1));
   border: 1px solid var(--eds_ui_background__medium,rgba(220,220,220,1));
-  color: rgba(61,61,61,1);
+  color: var(--eds_ui__accordion_header_color,rgba(61,61,61,1));
   cursor: pointer;
 }
 
 .c1 {
   margin: 0;
-  color: rgba(61,61,61,1);
+  color: var(--eds_ui__accordion_header_color,rgba(61,61,61,1));
   font-family: Equinor;
   font-size: 1.000rem;
   font-weight: 500;
@@ -62,7 +62,7 @@ exports[`Accordion Matches snapshot 1`] = `
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
   flex-grow: 1;
-  color: rgba(61,61,61,1);
+  color: var(--eds_ui__accordion_header_color,rgba(61,61,61,1));
   cursor: pointer;
 }
 
@@ -95,7 +95,7 @@ exports[`Accordion Matches snapshot 1`] = `
   padding-right: 16px;
   padding-bottom: 16px;
   margin: 0;
-  color: rgba(0,0,0,1);
+  color: var(--eds_input__text_color,rgba(0,0,0,1));
   font-family: Equinor;
   font-size: 1.000rem;
   font-weight: 400;

diff --git a/packages/eds-core-react/src/components/Autocomplete/__snapshots__/Autocomplete.test.tsx.snap b/packages/eds-core-react/src/components/Autocomplete/__snapshots__/Autocomplete.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Autocomplete Matches snapshot 1`] = `
 .c0 {
   margin: 0;
-  color: rgba(61,61,61,1);
+  color: var(--eds_paragraph__body_short_color,rgba(61,61,61,1));
   font-family: Equinor;
   font-size: 1.000rem;
   font-weight: 400;

diff --git a/packages/eds-core-react/src/components/Banner/__snapshots__/Banner.test.tsx.snap b/packages/eds-core-react/src/components/Banner/__snapshots__/Banner.test.tsx.snap
@@ -59,7 +59,7 @@ exports[`Banner Matches snapshot 1`] = `
 
 .c3 {
   margin: 0;
-  color: rgba(61,61,61,1);
+  color: var(--eds_paragraph__body_long_color,rgba(61,61,61,1));
   font-family: Equinor;
   font-size: 1.000rem;
   font-weight: 400;

diff --git a/packages/eds-core-react/src/components/Breadcrumbs/__snapshots__/Breadcrumbs.test.tsx.snap b/packages/eds-core-react/src/components/Breadcrumbs/__snapshots__/Breadcrumbs.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`Breadcrumbs Matches snapshot 1`] = `
 <DocumentFragment>
   .c2 {
   margin: 0;
-  color: rgba(61,61,61,1);
+  color: var(--eds_paragraph__body_short_color,rgba(61,61,61,1));
   font-family: Equinor;
   font-size: 1.000rem;
   font-weight: 400;

diff --git a/packages/eds-core-react/src/components/Card/__snapshots__/Card.test.tsx.snap b/packages/eds-core-react/src/components/Card/__snapshots__/Card.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`Card Matches snapshot 1`] = `
 <DocumentFragment>
   .c5 {
   margin: 0;
-  color: rgba(61,61,61,1);
+  color: var(--eds_heading__h5_color,rgba(61,61,61,1));
   font-family: Equinor;
   font-size: 1.125rem;
   font-weight: 500;
@@ -18,7 +18,7 @@ exports[`Card Matches snapshot 1`] = `
 
 .c6 {
   margin: 0;
-  color: rgba(61,61,61,1);
+  color: var(--eds_paragraph__body_short_color,rgba(61,61,61,1));
   font-family: Equinor;
   font-size: 1.000rem;
   font-weight: 400;

diff --git a/packages/eds-core-react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/packages/eds-core-react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
@@ -76,7 +76,7 @@ exports[`Checkbox Matches snapshot 1`] = `
 
 .c4 {
   margin: 0;
-  color: rgba(61,61,61,1);
+  color: var(--eds_navigation__menu_title_color,rgba(61,61,61,1));
   font-family: Equinor;
   font-size: 1.000rem;
   font-weight: 400;

diff --git a/packages/eds-core-react/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap b/packages/eds-core-react/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`Dialog Matches snapshot 1`] = `
   display: grid;
   grid-auto-columns: auto;
   margin: 0;
-  color: rgba(61,61,61,1);
+  color: var(--eds_ui__accordion_header_color,rgba(61,61,61,1));
   font-family: Equinor;
   font-size: 1.000rem;
   font-weight: 500;
@@ -41,7 +41,7 @@ exports[`Dialog Matches snapshot 1`] = `
 
 .c2 {
   margin: 0;
-  color: rgba(61,61,61,1);
+  color: var(--eds_ui__accordion_header_color,rgba(61,61,61,1));
   font-family: Equinor;
   font-size: 1.000rem;
   font-weight: 500;
@@ -58,7 +58,7 @@ exports[`Dialog Matches snapshot 1`] = `
 .c3 {
   --content-spacing-top: 16px;
   margin: 0;
-  color: rgba(61,61,61,1);
+  color: var(--eds_paragraph__body_long_color,rgba(61,61,61,1));
   font-family: Equinor;
   font-size: 1.000rem;
   font-weight: 400;

diff --git a/packages/eds-core-react/src/components/List/__snapshots__/List.test.tsx.snap b/packages/eds-core-react/src/components/List/__snapshots__/List.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`Lists Matches snapshot 1`] = `
 <DocumentFragment>
   .c0 {
   margin: 0;
-  color: rgba(61,61,61,1);
+  color: var(--eds_paragraph__body_short_color,rgba(61,61,61,1));
   font-family: Equinor;
   font-size: 1.000rem;
   font-weight: 400;

diff --git a/packages/eds-core-react/src/components/Popover/__snapshots__/Popover.test.tsx.snap b/packages/eds-core-react/src/components/Popover/__snapshots__/Popover.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`Popover Matches snapshot 1`] = `
 
 .c1 {
   margin: 0;
-  color: rgba(61,61,61,1);
+  color: var(--eds_ui__accordion_header_color,rgba(61,61,61,1));
   font-family: Equinor;
   font-size: 1.000rem;
   font-weight: 500;

diff --git a/packages/eds-core-react/src/components/Radio/__snapshots__/Radio.test.tsx.snap b/packages/eds-core-react/src/components/Radio/__snapshots__/Radio.test.tsx.snap
@@ -66,7 +66,7 @@ exports[`Radio Matches snapshot 1`] = `
 
 .c4 {
   margin: 0;
-  color: rgba(61,61,61,1);
+  color: var(--eds_navigation__menu_title_color,rgba(61,61,61,1));
   font-family: Equinor;
   font-size: 1.000rem;
   font-weight: 400;

diff --git a/packages/eds-core-react/src/components/SideBar/__snapshots__/SideBar.test.tsx.snap b/packages/eds-core-react/src/components/SideBar/__snapshots__/SideBar.test.tsx.snap
@@ -100,7 +100,7 @@ exports[`Sidebar Matches snapshot 1`] = `
           />
         </svg>
         <p
-          class="Typography__StyledTypography-sc-179guof-0 goHKeV SidebarLink__ItemText-sc-gbehcj-1 esObwH"
+          class="Typography__StyledTypography-sc-179guof-0 eFvBIQ SidebarLink__ItemText-sc-gbehcj-1 esObwH"
         >
           Home
         </p>
@@ -128,7 +128,7 @@ exports[`Sidebar Matches snapshot 1`] = `
           />
         </svg>
         <p
-          class="Typography__StyledTypography-sc-179guof-0 goHKeV SidebarLink__ItemText-sc-gbehcj-1 esObwH"
+          class="Typography__StyledTypography-sc-179guof-0 eFvBIQ SidebarLink__ItemText-sc-gbehcj-1 esObwH"
         >
           Another Link
         </p>

diff --git a/packages/eds-core-react/src/components/SideSheet/__snapshots__/SideSheet.test.tsx.snap b/packages/eds-core-react/src/components/SideSheet/__snapshots__/SideSheet.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`SideSheet Matches snapshot 1`] = `
 <DocumentFragment>
   .c2 {
   margin: 0;
-  color: rgba(61,61,61,1);
+  color: var(--eds_heading__h2_color,rgba(61,61,61,1));
   font-family: Equinor;
   font-size: 1.750rem;
   font-weight: 400;
@@ -127,7 +127,7 @@ exports[`SideSheet Matches snapshot 1`] = `
   padding-top: 16px;
   padding-right: 16px;
   margin: 0;
-  color: rgba(61,61,61,1);
+  color: var(--eds_paragraph__body_short_color,rgba(61,61,61,1));
   font-family: Equinor;
   font-size: 1.000rem;
   font-weight: 400;

diff --git a/packages/eds-core-react/src/components/Switch/__snapshots__/Switch.test.tsx.snap b/packages/eds-core-react/src/components/Switch/__snapshots__/Switch.test.tsx.snap
@@ -131,7 +131,7 @@ exports[`Switch Matches snapshot 1`] = `
 
 .c7 {
   margin: 0;
-  color: rgba(61,61,61,1);
+  color: var(--eds_navigation__menu_title_color,rgba(61,61,61,1));
   font-family: Equinor;
   font-size: 1.000rem;
   font-weight: 400;

diff --git a/...eds-core-react/src/components/TableOfContents/__snapshots__/TableOfContents.test.tsx.snap b/...eds-core-react/src/components/TableOfContents/__snapshots__/TableOfContents.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`TableOfContents Matches snapshot 1`] = `
 <DocumentFragment>
   .c3 {
   margin: 0;
-  color: rgba(61,61,61,1);
+  color: var(--eds_paragraph__body_short_color,rgba(61,61,61,1));
   font-family: Equinor;
   font-size: 1.000rem;
   font-weight: 400;
@@ -14,7 +14,7 @@ exports[`TableOfContents Matches snapshot 1`] = `
 
 .c1 {
   margin: 0;
-  color: rgba(61,61,61,1);
+  color: var(--eds_paragraph__overline_color,rgba(61,61,61,1));
   font-family: Equinor;
   font-size: 0.625rem;
   font-weight: 500;

diff --git a/packages/eds-core-react/src/components/Tabs/__snapshots__/Tabs.test.tsx.snap b/packages/eds-core-react/src/components/Tabs/__snapshots__/Tabs.test.tsx.snap
@@ -33,7 +33,7 @@ exports[`Tabs Matches snapshot 1`] = `
   padding-left: 16px;
   padding-right: 16px;
   margin: 0;
-  color: rgba(61,61,61,1);
+  color: var(--eds_navigation__menu_tabs_color,rgba(61,61,61,1));
   font-family: Equinor;
   font-size: 1.000rem;
   font-weight: 500;
@@ -101,7 +101,7 @@ exports[`Tabs Matches snapshot 1`] = `
   padding-left: 16px;
   padding-right: 16px;
   margin: 0;
-  color: rgba(61,61,61,1);
+  color: var(--eds_navigation__menu_tabs_color,rgba(61,61,61,1));
   font-family: Equinor;
   font-size: 1.000rem;
   font-weight: 500;
@@ -111,7 +111,7 @@ exports[`Tabs Matches snapshot 1`] = `
   -ms-letter-spacing: 0.013em;
   letter-spacing: 0.013em;
   text-align: left;
-  color: rgba(61,61,61,1);
+  color: var(--eds_navigation__menu_tabs_color,rgba(61,61,61,1));
   background-color: transparent;
   position: relative;
   white-space: nowrap;
@@ -186,7 +186,7 @@ exports[`Tabs Matches snapshot 1`] = `
 @media (hover:hover) and (pointer:fine) {
   .c2[data-hover],
   .c2:hover {
-    color: rgba(61,61,61,1);
+    color: var(--eds_navigation__menu_tabs_color,rgba(61,61,61,1));
     background: var(--eds_interactive_primary__hover_alt,rgba(222,237,238,1));
     cursor: pointer;
   }

diff --git a/packages/eds-core-react/src/components/TopBar/__snapshots__/TopBar.test.tsx.snap b/packages/eds-core-react/src/components/TopBar/__snapshots__/TopBar.test.tsx.snap
@@ -25,7 +25,7 @@ exports[`TopBar Matches snapshot 1`] = `
   padding-right: 24px;
   padding-bottom: 8px;
   margin: 0;
-  color: rgba(61,61,61,1);
+  color: var(--eds_navigation__menu_title_color,rgba(61,61,61,1));
   font-family: Equinor;
   font-size: 1.000rem;
   font-weight: 400;

diff --git a/packages/eds-core-react/src/components/Typography/__snapshots__/Typography.test.tsx.snap b/packages/eds-core-react/src/components/Typography/__snapshots__/Typography.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`Typography Matches snapshot 1`] = `
 <DocumentFragment>
   .c0 {
   margin: 0;
-  color: rgba(61,61,61,1);
+  color: var(--eds_paragraph__body_short_color,rgba(61,61,61,1));
   font-family: Equinor;
   font-size: 1.000rem;
   font-weight: 400;

diff --git a/packages/eds-tokens/CHANGELOG.md b/packages/eds-tokens/CHANGELOG.md
@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.9.1] - 2023-04-12
+
+### Added
+
+- Added css variables for typography colors by @bjartebore in https://github.com/equinor/design-system/pull/2840
+
 ## [0.9.0] - 2022-10-19
 
 ### Changed

diff --git a/packages/eds-tokens/elements.css b/packages/eds-tokens/elements.css
@@ -1,87 +1,87 @@
 
 h1 {
-  color: rgba(61, 61, 61, 1);
+  color: var(--eds_heading__h1_color, rgba(61, 61, 61, 1));
   font-size: 2.000rem;
   font-weight: 400;
   line-height: 1.250em;
 }
 h2 {
-  color: rgba(61, 61, 61, 1);
+  color: var(--eds_heading__h2_color, rgba(61, 61, 61, 1));
   font-size: 1.750rem;
   font-weight: 400;
   line-height: 1.250em;
 }
 h3 {
-  color: rgba(61, 61, 61, 1);
+  color: var(--eds_heading__h3_color, rgba(61, 61, 61, 1));
   font-size: 1.500rem;
   font-weight: 400;
   line-height: 1.250em;
 }
 h4 {
-  color: rgba(61, 61, 61, 1);
+  color: var(--eds_heading__h4_color, rgba(61, 61, 61, 1));
   font-size: 1.250rem;
   font-weight: 400;
   line-height: 1.600em;
 }
 h5 {
-  color: rgba(61, 61, 61, 1);
+  color: var(--eds_heading__h5_color, rgba(61, 61, 61, 1));
   font-size: 1.125rem;
   font-weight: 500;
   line-height: 1.333em;
   letter-spacing: 0.013em;
 }
 h6 {
-  color: rgba(61, 61, 61, 1);
+  color: var(--eds_heading__h6_color, rgba(61, 61, 61, 1));
   font-size: 1.000rem;
   font-weight: 500;
   line-height: 1.500em;
   letter-spacing: 0.013em;
 }
 label {
-  color: rgba(0, 0, 0, 1);
+  color: var(--eds_navigation__label_color, rgba(0, 0, 0, 1));
   font-size: 0.750rem;
   font-weight: 500;
   line-height: 1.333em;
 }
 button {
-  color: rgba(0, 0, 0, 1);
+  color: var(--eds_navigation__button_color, rgba(0, 0, 0, 1));
   font-size: 0.875rem;
   font-weight: 500;
   line-height: 1.143em;
 }
 label {
-  color: rgba(0, 0, 0, 1);
+  color: var(--eds_input__label_color, rgba(0, 0, 0, 1));
   font-size: 0.750rem;
   font-weight: 500;
   line-height: 1.333em;
 }
 p {
-  color: rgba(61, 61, 61, 1);
+  color: var(--eds_paragraph__body_short_color, rgba(61, 61, 61, 1));
   font-size: 1.000rem;
   font-weight: 400;
   line-height: 1.250em;
 }
 a {
-  color: rgba(0, 112, 121, 1);
+  color: var(--eds_paragraph__body_long_link_color, rgba(0, 112, 121, 1));
   font-size: 1.000rem;
   font-weight: 400;
   line-height: 1.500em;
   text-decoration: underline;
 }
 th {
-  color: rgba(0, 0, 0, 1);
+  color: var(--eds_table__cell_header_color, rgba(0, 0, 0, 1));
   font-size: 0.875rem;
   font-weight: 700;
   line-height: 1.429em;
 }
 table {
-  color: rgba(0, 0, 0, 1);
+  color: var(--eds_table__cell_text_color, rgba(0, 0, 0, 1));
   font-size: 0.875rem;
   font-weight: 500;
   line-height: 1.429em;
 }
 td {
-  color: rgba(0, 0, 0, 1);
+  color: var(--eds_table__cell_numeric_monospaced_color, rgba(0, 0, 0, 1));
   font-size: 0.875rem;
   font-weight: 500;
   line-height: 1.429em;

diff --git a/packages/eds-tokens/package.json b/packages/eds-tokens/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@equinor/eds-tokens",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "description": "Design tokens for the Equinor Design System",
   "main": "dist/tokens.cjs.js",
   "module": "dist/esm/index.js",