From 7f907fce338b3eae4809392a5f38917f7edeece9 Mon Sep 17 00:00:00 2001
From: Masoud Amjadi <mamjadi@contractor.chanzuckerberg.com>
Date: Thu, 8 Feb 2024 16:31:22 -0500
Subject: [PATCH] fix(styles): update style-dictionary styles

---
 .../styles-dictionary/css/variables.css       | 66 ++++++++++---------
 .../styles-dictionary/scss/_variables.scss    |  4 +-
 .../styles-dictionary/css/variables.css       | 66 ++++++++++---------
 .../styles-dictionary/scss/_variables.scss    |  4 +-
 4 files changed, 72 insertions(+), 68 deletions(-)

diff --git a/packages/components/src/common/styles-dictionary/css/variables.css b/packages/components/src/common/styles-dictionary/css/variables.css
index 24eec6a52..7466e3275 100644
--- a/packages/components/src/common/styles-dictionary/css/variables.css
+++ b/packages/components/src/common/styles-dictionary/css/variables.css
@@ -2,33 +2,34 @@
   --sds-font-letter-spacing-default: 0.3px;
   --sds-font-letter-spacing-caps: 1px;
   --sds-font-color: black;
-  --sds-font-font-family: 'Open Sans', 'OpenSans-Regular';
-  --sds-font-body-xxxs-400-font: 400 11px/16px 'Open Sans', 'OpenSans-Regular';
-  --sds-font-body-xxxs-600-font: 600 11px/16px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-body-xxs-400-font: 400 12px/18px 'Open Sans', 'OpenSans-Regular';
-  --sds-font-body-xxs-600-font: 600 12px/18px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-body-xs-400-font: 400 13px/20px 'Open Sans', 'OpenSans-Regular';
-  --sds-font-body-xs-600-font: 600 13px/20px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-body-s-400-font: 400 14px/24px 'Open Sans', 'OpenSans-Regular';
-  --sds-font-body-s-600-font: 600 14px/24px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-body-m-400-font: 400 16px/26px 'Open Sans', 'OpenSans-Regular';
-  --sds-font-body-m-600-font: 600 16px/26px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-body-l-400-font: 400 18px/28px 'Open Sans', 'OpenSans-Regular';
-  --sds-font-body-l-600-font: 600 18px/28px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-caps-xxxxs-600-font: 600 10px/14px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-caps-xxxxs-600-text-transform:  uppercase;
-  --sds-font-caps-xxxs-600-font: 600 11px/16px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-caps-xxxs-600-text-transform:  uppercase;
-  --sds-font-caps-xxs-600-font: 600 12px/18px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-caps-xxs-600-text-transform:  uppercase;
-  --sds-font-header-xxxs-600-font: 600 11px/16px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-header-xxs-600-font: 600 12px/18px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-header-xs-600-font: 600 13px/18px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-header-s-600-font: 600 14px/20px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-header-m-600-font: 600 16px/22px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-header-l-600-font: 600 18px/24px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-header-xl-600-font: 600 22px/30px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-header-xxl-600-font: 600 26px/34px 'Open Sans', 'OpenSans-SemiBold';
+  --sds-font-font-family: "Open Sans", "OpenSans-Regular";
+  --sds-font-body-xxxs-400-font: 400 11px/16px "Open Sans", "OpenSans-Regular";
+  --sds-font-body-xxxs-600-font: 600 11px/16px "Open Sans", "OpenSans-SemiBold";
+  --sds-font-body-xxs-400-font: 400 12px/18px "Open Sans", "OpenSans-Regular";
+  --sds-font-body-xxs-600-font: 600 12px/18px "Open Sans", "OpenSans-SemiBold";
+  --sds-font-body-xs-400-font: 400 13px/20px "Open Sans", "OpenSans-Regular";
+  --sds-font-body-xs-600-font: 600 13px/20px "Open Sans", "OpenSans-SemiBold";
+  --sds-font-body-s-400-font: 400 14px/24px "Open Sans", "OpenSans-Regular";
+  --sds-font-body-s-600-font: 600 14px/24px "Open Sans", "OpenSans-SemiBold";
+  --sds-font-body-m-400-font: 400 16px/26px "Open Sans", "OpenSans-Regular";
+  --sds-font-body-m-600-font: 600 16px/26px "Open Sans", "OpenSans-SemiBold";
+  --sds-font-body-l-400-font: 400 18px/28px "Open Sans", "OpenSans-Regular";
+  --sds-font-body-l-600-font: 600 18px/28px "Open Sans", "OpenSans-SemiBold";
+  --sds-font-caps-xxxxs-600-font: 600 10px/14px "Open Sans", "OpenSans-SemiBold";
+  --sds-font-caps-xxxxs-600-text-transform: uppercase;
+  --sds-font-caps-xxxs-600-font: 600 11px/16px "Open Sans", "OpenSans-SemiBold";
+  --sds-font-caps-xxxs-600-text-transform: uppercase;
+  --sds-font-caps-xxs-600-font: 600 12px/18px "Open Sans", "OpenSans-SemiBold";
+  --sds-font-caps-xxs-600-text-transform: uppercase;
+  --sds-font-header-xxxs-600-font: 600 11px/16px "Open Sans",
+    "OpenSans-SemiBold";
+  --sds-font-header-xxs-600-font: 600 12px/18px "Open Sans", "OpenSans-SemiBold";
+  --sds-font-header-xs-600-font: 600 13px/18px "Open Sans", "OpenSans-SemiBold";
+  --sds-font-header-s-600-font: 600 14px/20px "Open Sans", "OpenSans-SemiBold";
+  --sds-font-header-m-600-font: 600 16px/22px "Open Sans", "OpenSans-SemiBold";
+  --sds-font-header-l-600-font: 600 18px/24px "Open Sans", "OpenSans-SemiBold";
+  --sds-font-header-xl-600-font: 600 22px/30px "Open Sans", "OpenSans-SemiBold";
+  --sds-font-header-xxl-600-font: 600 26px/34px "Open Sans", "OpenSans-SemiBold";
   --sds-color-overlay-100: rgba(0, 0, 0, 0.08);
   --sds-color-overlay-200: rgba(0, 0, 0, 0.03);
   --sds-color-beta-100: #f4f0f9;
@@ -66,9 +67,10 @@
   --sds-color-warning-200: #fff3e1;
   --sds-color-warning-400: #f5a623;
   --sds-color-warning-600: #946314;
-  --sds-drop-shadows-shadow-l: 0.0px 2.0px 12.0px 0px rgba(0, 0, 0, 0.3);
-  --sds-drop-shadows-shadow-m: 0.0px 2.0px 10.0px 0px rgba(0, 0, 0, 0.15),0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.15);
-  --sds-drop-shadows-shadow-s: 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25);
+  --sds-drop-shadows-shadow-l: 0px 2px 12px 0px rgba(0, 0, 0, 0.3);
+  --sds-drop-shadows-shadow-m: 0px 2px 10px 0px rgba(0, 0, 0, 0.15),
+    0px 2px 4px 0px rgba(0, 0, 0, 0.15);
+  --sds-drop-shadows-shadow-s: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
   --sds-borders-error-400: 1px solid #dc132c;
   --sds-borders-gray-100: 1px solid #f8f8f8;
   --sds-borders-gray-200: 1px solid #eaeaea;
@@ -94,8 +96,8 @@
   --sds-spaces-l: 14px;
   --sds-spaces-xl: 22px;
   --sds-spaces-xxl: 38px;
-  --sds-icon-sizes-input-height: 16px; /* for use with input icons only */
-  --sds-icon-sizes-input-width: 16px; /* for use with input icons only */
+  --sds-icon-sizes-input-height: 16px;
+  --sds-icon-sizes-input-width: 16px;
   --sds-icon-sizes-xs-height: 10px;
   --sds-icon-sizes-xs-width: 10px;
   --sds-icon-sizes-s-height: 14px;
diff --git a/packages/components/src/common/styles-dictionary/scss/_variables.scss b/packages/components/src/common/styles-dictionary/scss/_variables.scss
index 628bea1da..2d8308510 100644
--- a/packages/components/src/common/styles-dictionary/scss/_variables.scss
+++ b/packages/components/src/common/styles-dictionary/scss/_variables.scss
@@ -93,8 +93,8 @@ $sds-spaces-m: 10px;
 $sds-spaces-l: 14px;
 $sds-spaces-xl: 22px;
 $sds-spaces-xxl: 38px;
-$sds-icon-sizes-input-height: 16px; // for use with input icons only
-$sds-icon-sizes-input-width: 16px; // for use with input icons only
+$sds-icon-sizes-input-height: 16px;
+$sds-icon-sizes-input-width: 16px;
 $sds-icon-sizes-xs-height: 10px;
 $sds-icon-sizes-xs-width: 10px;
 $sds-icon-sizes-s-height: 14px;
diff --git a/packages/data-viz/src/common/styles-dictionary/css/variables.css b/packages/data-viz/src/common/styles-dictionary/css/variables.css
index 24eec6a52..7466e3275 100644
--- a/packages/data-viz/src/common/styles-dictionary/css/variables.css
+++ b/packages/data-viz/src/common/styles-dictionary/css/variables.css
@@ -2,33 +2,34 @@
   --sds-font-letter-spacing-default: 0.3px;
   --sds-font-letter-spacing-caps: 1px;
   --sds-font-color: black;
-  --sds-font-font-family: 'Open Sans', 'OpenSans-Regular';
-  --sds-font-body-xxxs-400-font: 400 11px/16px 'Open Sans', 'OpenSans-Regular';
-  --sds-font-body-xxxs-600-font: 600 11px/16px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-body-xxs-400-font: 400 12px/18px 'Open Sans', 'OpenSans-Regular';
-  --sds-font-body-xxs-600-font: 600 12px/18px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-body-xs-400-font: 400 13px/20px 'Open Sans', 'OpenSans-Regular';
-  --sds-font-body-xs-600-font: 600 13px/20px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-body-s-400-font: 400 14px/24px 'Open Sans', 'OpenSans-Regular';
-  --sds-font-body-s-600-font: 600 14px/24px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-body-m-400-font: 400 16px/26px 'Open Sans', 'OpenSans-Regular';
-  --sds-font-body-m-600-font: 600 16px/26px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-body-l-400-font: 400 18px/28px 'Open Sans', 'OpenSans-Regular';
-  --sds-font-body-l-600-font: 600 18px/28px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-caps-xxxxs-600-font: 600 10px/14px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-caps-xxxxs-600-text-transform:  uppercase;
-  --sds-font-caps-xxxs-600-font: 600 11px/16px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-caps-xxxs-600-text-transform:  uppercase;
-  --sds-font-caps-xxs-600-font: 600 12px/18px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-caps-xxs-600-text-transform:  uppercase;
-  --sds-font-header-xxxs-600-font: 600 11px/16px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-header-xxs-600-font: 600 12px/18px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-header-xs-600-font: 600 13px/18px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-header-s-600-font: 600 14px/20px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-header-m-600-font: 600 16px/22px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-header-l-600-font: 600 18px/24px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-header-xl-600-font: 600 22px/30px 'Open Sans', 'OpenSans-SemiBold';
-  --sds-font-header-xxl-600-font: 600 26px/34px 'Open Sans', 'OpenSans-SemiBold';
+  --sds-font-font-family: "Open Sans", "OpenSans-Regular";
+  --sds-font-body-xxxs-400-font: 400 11px/16px "Open Sans", "OpenSans-Regular";
+  --sds-font-body-xxxs-600-font: 600 11px/16px "Open Sans", "OpenSans-SemiBold";
+  --sds-font-body-xxs-400-font: 400 12px/18px "Open Sans", "OpenSans-Regular";
+  --sds-font-body-xxs-600-font: 600 12px/18px "Open Sans", "OpenSans-SemiBold";
+  --sds-font-body-xs-400-font: 400 13px/20px "Open Sans", "OpenSans-Regular";
+  --sds-font-body-xs-600-font: 600 13px/20px "Open Sans", "OpenSans-SemiBold";
+  --sds-font-body-s-400-font: 400 14px/24px "Open Sans", "OpenSans-Regular";
+  --sds-font-body-s-600-font: 600 14px/24px "Open Sans", "OpenSans-SemiBold";
+  --sds-font-body-m-400-font: 400 16px/26px "Open Sans", "OpenSans-Regular";
+  --sds-font-body-m-600-font: 600 16px/26px "Open Sans", "OpenSans-SemiBold";
+  --sds-font-body-l-400-font: 400 18px/28px "Open Sans", "OpenSans-Regular";
+  --sds-font-body-l-600-font: 600 18px/28px "Open Sans", "OpenSans-SemiBold";
+  --sds-font-caps-xxxxs-600-font: 600 10px/14px "Open Sans", "OpenSans-SemiBold";
+  --sds-font-caps-xxxxs-600-text-transform: uppercase;
+  --sds-font-caps-xxxs-600-font: 600 11px/16px "Open Sans", "OpenSans-SemiBold";
+  --sds-font-caps-xxxs-600-text-transform: uppercase;
+  --sds-font-caps-xxs-600-font: 600 12px/18px "Open Sans", "OpenSans-SemiBold";
+  --sds-font-caps-xxs-600-text-transform: uppercase;
+  --sds-font-header-xxxs-600-font: 600 11px/16px "Open Sans",
+    "OpenSans-SemiBold";
+  --sds-font-header-xxs-600-font: 600 12px/18px "Open Sans", "OpenSans-SemiBold";
+  --sds-font-header-xs-600-font: 600 13px/18px "Open Sans", "OpenSans-SemiBold";
+  --sds-font-header-s-600-font: 600 14px/20px "Open Sans", "OpenSans-SemiBold";
+  --sds-font-header-m-600-font: 600 16px/22px "Open Sans", "OpenSans-SemiBold";
+  --sds-font-header-l-600-font: 600 18px/24px "Open Sans", "OpenSans-SemiBold";
+  --sds-font-header-xl-600-font: 600 22px/30px "Open Sans", "OpenSans-SemiBold";
+  --sds-font-header-xxl-600-font: 600 26px/34px "Open Sans", "OpenSans-SemiBold";
   --sds-color-overlay-100: rgba(0, 0, 0, 0.08);
   --sds-color-overlay-200: rgba(0, 0, 0, 0.03);
   --sds-color-beta-100: #f4f0f9;
@@ -66,9 +67,10 @@
   --sds-color-warning-200: #fff3e1;
   --sds-color-warning-400: #f5a623;
   --sds-color-warning-600: #946314;
-  --sds-drop-shadows-shadow-l: 0.0px 2.0px 12.0px 0px rgba(0, 0, 0, 0.3);
-  --sds-drop-shadows-shadow-m: 0.0px 2.0px 10.0px 0px rgba(0, 0, 0, 0.15),0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.15);
-  --sds-drop-shadows-shadow-s: 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25);
+  --sds-drop-shadows-shadow-l: 0px 2px 12px 0px rgba(0, 0, 0, 0.3);
+  --sds-drop-shadows-shadow-m: 0px 2px 10px 0px rgba(0, 0, 0, 0.15),
+    0px 2px 4px 0px rgba(0, 0, 0, 0.15);
+  --sds-drop-shadows-shadow-s: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
   --sds-borders-error-400: 1px solid #dc132c;
   --sds-borders-gray-100: 1px solid #f8f8f8;
   --sds-borders-gray-200: 1px solid #eaeaea;
@@ -94,8 +96,8 @@
   --sds-spaces-l: 14px;
   --sds-spaces-xl: 22px;
   --sds-spaces-xxl: 38px;
-  --sds-icon-sizes-input-height: 16px; /* for use with input icons only */
-  --sds-icon-sizes-input-width: 16px; /* for use with input icons only */
+  --sds-icon-sizes-input-height: 16px;
+  --sds-icon-sizes-input-width: 16px;
   --sds-icon-sizes-xs-height: 10px;
   --sds-icon-sizes-xs-width: 10px;
   --sds-icon-sizes-s-height: 14px;
diff --git a/packages/data-viz/src/common/styles-dictionary/scss/_variables.scss b/packages/data-viz/src/common/styles-dictionary/scss/_variables.scss
index 628bea1da..2d8308510 100644
--- a/packages/data-viz/src/common/styles-dictionary/scss/_variables.scss
+++ b/packages/data-viz/src/common/styles-dictionary/scss/_variables.scss
@@ -93,8 +93,8 @@ $sds-spaces-m: 10px;
 $sds-spaces-l: 14px;
 $sds-spaces-xl: 22px;
 $sds-spaces-xxl: 38px;
-$sds-icon-sizes-input-height: 16px; // for use with input icons only
-$sds-icon-sizes-input-width: 16px; // for use with input icons only
+$sds-icon-sizes-input-height: 16px;
+$sds-icon-sizes-input-width: 16px;
 $sds-icon-sizes-xs-height: 10px;
 $sds-icon-sizes-xs-width: 10px;
 $sds-icon-sizes-s-height: 14px;