feat!: remove legacy tokens and typography mixins

.storybook/data/tokens.json

@@ -535,33 +535,5 @@
   "eds-theme-form-border-width": "1px",
   "eds-theme-form-border-radius": "4px",
   "eds-theme-size-slider-track-height": "var(--eds-size-1)",
-  "eds-theme-size-slider-thumb": "var(--eds-size-3)",
-  "legacy-color-gray-50": "#F8F9FC",
-  "legacy-color-gray-100": "#EBEBEC",
-  "legacy-color-gray-200": "#D8D8D9",
-  "legacy-color-gray-300": "#C5C5C6",
-  "legacy-color-gray-500": "#9F9FA0",
-  "legacy-color-gray-700": "#78797A",
-  "legacy-color-gray-1000": "#3F4041",
-  "legacy-color-black": "#2C2D2E",
-  "legacy-color-red-100": "#F7DDDD",
-  "legacy-color-red-200": "#F25252",
-  "legacy-color-green-100": "#E1F0E7",
-  "legacy-color-green-200": "#6CC188",
-  "legacy-color-green-300": "#457B57",
-  "legacy-color-yellow-200": "#FFC55B",
-  "legacy-color-yellow-300": "#A46900",
-  "legacy-color-yellow-400": "#644C1F",
-  "legacy-color-purple-200": "#7686D3",
-  "legacy-color-purple-300": "#5761BA",
-  "legacy-color-purple-400": "#32417C",
-  "legacy-size-font-h1": "1.5rem",
-  "legacy-size-font-h2": "1.125rem",
-  "legacy-size-font-body": "1rem",
-  "legacy-size-font-sm": "0.875rem",
-  "legacy-size-font-xs": "0.75rem",
-  "legacy-size-line-height-h1": "2rem",
-  "legacy-size-line-height-body": "1.5rem",
-  "legacy-size-line-height-sm": "1.25rem",
-  "legacy-size-line-height-xs": "1rem"
+  "eds-theme-size-slider-thumb": "var(--eds-size-3)"
 }

.storybook/pages/CoursePlannerStep1/CoursePlannerStep1.module.css

@@ -9,5 +9,5 @@
  */
 
 .course-planner-step1__text{
-    @mixin eds-typography-preset-004-bold;
+    font: var(--eds-typography-preset-004);
   }

src/components/DragDrop/DragDrop.module.css

@@ -159,7 +159,7 @@
  * Optional title div at the top of an item.
  */
 .drag-drop__item-title {
-  @mixin eds-typography-preset-007-bold;
+  font: var(--eds-typography-preset-007-bold);
   margin-bottom: var(--eds-size-2);
 }
 

src/components/Toast/Toast.module.css

@@ -65,7 +65,7 @@
  * The text in the toast. Styled via mixins over using Text component.
  */
 .toast__text {
-  @mixin eds-typography-preset-007;
+  font: var(--eds-typography-preset-007-bold);
 
   color: inherit;
 }

src/design-tokens/mixins.css

@@ -1,5 +1,3 @@
-@import '../design-tokens/tier-2-usage/typography-usage.css';
-
 /**
  * Link button styles
  */

src/design-tokens/tier-1-definitions/colors.json

@@ -133,38 +133,5 @@
         }
       }
     }
-  },
-  "legacy": {
-    "color": {
-      "gray": {
-        "50": { "value": "#F8F9FC" },
-        "100": { "value": "#EBEBEC" },
-        "200": { "value": "#D8D8D9" },
-        "300": { "value": "#C5C5C6" },
-        "500": { "value": "#9F9FA0" },
-        "700": { "value": "#78797A" },
-        "1000": { "value": "#3F4041" }
-      },
-      "black": { "value": "#2C2D2E" },
-      "red": {
-        "100": { "value": "#F7DDDD" },
-        "200": { "value": "#F25252" }
-      },
-      "green": {
-        "100": { "value": "#E1F0E7" },
-        "200": { "value": "#6CC188" },
-        "300": { "value": "#457B57" }
-      },
-      "yellow": {
-        "200": { "value": "#FFC55B" },
-        "300": { "value": "#A46900" },
-        "400": { "value": "#644C1F" }
-      },
-      "purple": {
-        "200": { "value": "#7686D3" },
-        "300": { "value": "#5761BA" },
-        "400": { "value": "#32417C" }
-      }
-    }
   }
 }