Navigation new icons and color (#2581)

* chore: adding new color (primary-30) and icons for representing expand/collapse actions. --------- Co-authored-by: Carlos Cortizas <[email protected]>
commercetools · Aug 22, 2023 · 27c002a · 27c002a · vercel · Aug 22, 2023
1 parent 842e122
commit 27c002a
Show file tree

Hide file tree

Showing 10 changed files with 331 additions and 0 deletions.
diff --git a/.changeset/gold-guests-occur.md b/.changeset/gold-guests-occur.md
@@ -0,0 +1,6 @@
+---
+'@commercetools-uikit/icons': patch
+'@commercetools-uikit/design-system': patch
+---
+
+Adding new color (primary-30) and icons for representing expand/collapse actions.
diff --git a/design-system/materials/custom-properties.css b/design-system/materials/custom-properties.css
@@ -8,6 +8,7 @@
 :root {
   --color-primary: #00b39e;
   --color-primary-25: hsl(172.9608938547486, 100%, 25%);
+  --color-primary-30: hsl(172.9608938547486, 100%, 30%);
   --color-primary-40: hsl(172.9608938547486, 100%, 40%);
   --color-primary-85: hsl(172.9608938547486, 100%, 85%);
   --color-primary-95: hsl(172.9608938547486, 100%, 95%);

diff --git a/design-system/materials/custom-properties.json b/design-system/materials/custom-properties.json
@@ -1,6 +1,7 @@
 {
   "--color-primary": "#00b39e",
   "--color-primary-25": "hsl(172.9608938547486, 100%, 25%)",
+  "--color-primary-30": "hsl(172.9608938547486, 100%, 30%)",
   "--color-primary-40": "hsl(172.9608938547486, 100%, 40%)",
   "--color-primary-85": "hsl(172.9608938547486, 100%, 85%)",
   "--color-primary-95": "hsl(172.9608938547486, 100%, 95%)",

diff --git a/design-system/materials/internals/definition.yaml b/design-system/materials/internals/definition.yaml
@@ -38,6 +38,7 @@ choiceGroupsByTheme:
       choices:
         color-primary: '#00b39e'
         color-primary-25: 'hsl(172.9608938547486, 100%, 25%)'
+        color-primary-30: 'hsl(172.9608938547486, 100%, 30%)'
         color-primary-40: 'hsl(172.9608938547486, 100%, 40%)'
         color-primary-85: 'hsl(172.9608938547486, 100%, 85%)'
         color-primary-95: 'hsl(172.9608938547486, 100%, 95%)'

diff --git a/design-system/src/design-tokens.ts b/design-system/src/design-tokens.ts
@@ -7,6 +7,7 @@ export const themes = {
   default: {
     colorPrimary: '#00b39e',
     colorPrimary25: 'hsl(172.9608938547486, 100%, 25%)',
+    colorPrimary30: 'hsl(172.9608938547486, 100%, 30%)',
     colorPrimary40: 'hsl(172.9608938547486, 100%, 40%)',
     colorPrimary85: 'hsl(172.9608938547486, 100%, 85%)',
     colorPrimary95: 'hsl(172.9608938547486, 100%, 95%)',
@@ -530,6 +531,7 @@ export const themes = {
 const designTokens = {
   colorPrimary: 'var(--color-primary, #00b39e)',
   colorPrimary25: 'var(--color-primary-25, hsl(172.9608938547486, 100%, 25%))',
+  colorPrimary30: 'var(--color-primary-30, hsl(172.9608938547486, 100%, 30%))',
   colorPrimary40: 'var(--color-primary-40, hsl(172.9608938547486, 100%, 40%))',
   colorPrimary85: 'var(--color-primary-85, hsl(172.9608938547486, 100%, 85%))',
   colorPrimary95: 'var(--color-primary-95, hsl(172.9608938547486, 100%, 95%))',

diff --git a/packages/components/icons/src/generated/SidebarCollapseReact.tsx b/packages/components/icons/src/generated/SidebarCollapseReact.tsx
diff --git a/packages/components/icons/src/generated/SidebarExpandReact.tsx b/packages/components/icons/src/generated/SidebarExpandReact.tsx
diff --git a/packages/components/icons/src/generated/index.ts b/packages/components/icons/src/generated/index.ts
diff --git a/packages/components/icons/src/svg/sidebar-collapse.react.svg b/packages/components/icons/src/svg/sidebar-collapse.react.svg
diff --git a/packages/components/icons/src/svg/sidebar-expand.react.svg b/packages/components/icons/src/svg/sidebar-expand.react.svg