Merge branch 'andrehadianto/design-system-components' of https://github.com/snowball-tools/snowballtools-base into ayungavis/T-4834-button

packages/frontend/src/index.css

@@ -1,3 +1,9 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer utilities {
+  .focus-ring {
+    @apply focus-visible:ring-[3px] focus-visible:ring-snowball-200 focus-visible:ring-offset-1 focus-visible:ring-offset-snowball-500 focus-visible:outline-none;
+  }
+}

packages/frontend/tailwind.config.js

@@ -13,6 +13,67 @@ export default withMT({
     },
     extend: {
       colors: {
+        emerald: {
+          100: '#d1fae5',
+          200: '#a9f1d0',
+          300: '#6ee7b7',
+          400: '#34d399',
+          50: '#ecfdf5',
+          500: '#10b981',
+          600: '#059669',
+          700: '#047857',
+          800: '#065f46',
+          900: '#064e3b',
+        },
+        gray: {
+          0: '#ffffff',
+          100: '#f1f5f9',
+          200: '#e2e9f0',
+          300: '#cbd6e1',
+          400: '#94a7b8',
+          50: '#f8fafc',
+          500: '#60788f',
+          600: '#475969',
+          700: '#334555',
+          800: '#1b2d3e',
+          900: '#0b1d2e',
+        },
+        orange: {
+          100: '#ffedd5',
+          200: '#fed7aa',
+          300: '#fdba74',
+          400: '#fb923c',
+          50: '#fff7ed',
+          500: '#f97316',
+          600: '#ea580c',
+          700: '#c2410c',
+          800: '#9a3412',
+          900: '#7c2d12',
+        },
+        rose: {
+          100: '#ffe4e6',
+          200: '#fecdd3',
+          300: '#fda4af',
+          400: '#fb7185',
+          50: '#fff1f2',
+          500: '#f43f5e',
+          600: '#e11d48',
+          700: '#be123c',
+          800: '#9f1239',
+          900: '#881337',
+        },
+        snowball: {
+          100: '#e1f1fe',
+          200: '#ddeefd',
+          300: '#cfe6fc',
+          400: '#74bafb',
+          50: '#ecf6fe',
+          500: '#47a4fa',
+          600: '#0f86f5',
+          700: '#0977dc',
+          800: '#075185',
+          900: '#0a3a5c',
+        },
         base: {
           bg: '#ffffff',
           'bg-alternate': '#f8fafc',
@@ -79,67 +140,6 @@ export default withMT({
           'floating-hovered': '#f1f5f9',
           'high-contrast': '#0b1d2e',
         },
-        emerald: {
-          50: '#ecfdf5',
-          100: '#d1fae5',
-          200: '#a9f1d0',
-          300: '#6ee7b7',
-          400: '#34d399',
-          500: '#10b981',
-          600: '#059669',
-          700: '#047857',
-          800: '#065f46',
-          900: '#064e3b',
-        },
-        gray: {
-          0: '#ffffff',
-          50: '#f8fafc',
-          100: '#f1f5f9',
-          200: '#e2e9f0',
-          300: '#cbd6e1',
-          400: '#94a7b8',
-          500: '#60788f',
-          600: '#475969',
-          700: '#334555',
-          800: '#1b2d3e',
-          900: '#0b1d2e',
-        },
-        orange: {
-          50: '#fff7ed',
-          100: '#ffedd5',
-          200: '#fed7aa',
-          300: '#fdba74',
-          400: '#fb923c',
-          500: '#f97316',
-          600: '#ea580c',
-          700: '#c2410c',
-          800: '#9a3412',
-          900: '#7c2d12',
-        },
-        rose: {
-          50: '#fff1f2',
-          100: '#ffe4e6',
-          200: '#fecdd3',
-          300: '#fda4af',
-          400: '#fb7185',
-          500: '#f43f5e',
-          600: '#e11d48',
-          700: '#be123c',
-          800: '#9f1239',
-          900: '#881337',
-        },
-        snowball: {
-          50: '#ecf6fe',
-          100: '#e1f1fe',
-          200: '#ddeefd',
-          300: '#cfe6fc',
-          400: '#74bafb',
-          500: '#47a4fa',
-          600: '#0f86f5',
-          700: '#0977dc',
-          800: '#075185',
-          900: '#0a3a5c',
-        },
       },
       boxShadow: {
         button: