refactor(themes): add semantic tokens and more numeric tokens

Author: brandyscarney

core/src/themes/base/default.tokens.ts

@@ -18,7 +18,9 @@ export const defaultTheme: DefaultTheme = {
 
   spacing: {
     0: '0px',
+    25: '1px',
     50: '2px',
+    75: '3px',
     100: '4px',
     150: '6px',
     200: '8px',
@@ -100,17 +102,26 @@ export const defaultTheme: DefaultTheme = {
     300: '12px',
     350: '14px',
     400: '16px',
+    hairline: '0.55px',
   },
 
   radii: {
     0: '0px',
-    25: '2px',
+    25: '1px',
+    50: '2px',
+    75: '3px',
     100: '4px',
+    150: '6px',
     200: '8px',
+    250: '10px',
     300: '12px',
+    350: '14px',
     400: '16px',
     500: '20px',
+    600: '24px',
+    700: '28px',
     800: '32px',
+    900: '36px',
     1000: '40px',
     full: '999px',
   },

core/src/themes/themes.interfaces.ts

@@ -20,7 +20,9 @@ export type BaseTheme = {
   // SPACE TOKENS
   spacing?: {
     0?: string;
+    25?: string;
     50?: string;
+    75?: string;
     100?: string;
     150?: string;
     200?: string;
@@ -44,6 +46,17 @@ export type BaseTheme = {
     1100?: string;
     1150?: string;
     1200?: string;
+    xxxxs?: string;
+    xxxs?: string;
+    xxs?: string;
+    xs?: string;
+    sm?: string;
+    md?: string;
+    lg?: string;
+    xl?: string;
+    xxl?: string;
+    xxxl?: string;
+    xxxxl?: string;
   };
 
   scaling?: {
@@ -88,6 +101,17 @@ export type BaseTheme = {
     6200?: string;
     7400?: string;
     9000?: string;
+    xxxxs?: string;
+    xxxs?: string;
+    xxs?: string;
+    xs?: string;
+    sm?: string;
+    md?: string;
+    lg?: string;
+    xl?: string;
+    xxl?: string;
+    xxxl?: string;
+    xxxxl?: string;
   };
 
   // APPEARANCE TOKENS
@@ -103,18 +127,49 @@ export type BaseTheme = {
     300?: string;
     350?: string;
     400?: string;
+    xxxxs?: string;
+    xxxs?: string;
+    xxs?: string;
+    xs?: string;
+    sm?: string;
+    md?: string;
+    lg?: string;
+    xl?: string;
+    xxl?: string;
+    xxxl?: string;
+    xxxxl?: string;
+    hairline?: string;
   };
 
   radii?: {
     0?: string;
     25?: string;
+    50?: string;
+    75?: string;
     100?: string;
+    150?: string;
     200?: string;
+    250?: string;
     300?: string;
+    350?: string;
     400?: string;
     500?: string;
+    600?: string;
+    700?: string;
     800?: string;
+    900?: string;
     1000?: string;
+    xxxxs?: string;
+    xxxs?: string;
+    xxs?: string;
+    xs?: string;
+    sm?: string;
+    md?: string;
+    lg?: string;
+    xl?: string;
+    xxl?: string;
+    xxxl?: string;
+    xxxxl?: string;
     full?: string;
   };