Add css file with design tokens

styles/common.css

@@ -0,0 +1,49 @@
+/* This file contains design tokens used in core Gleam projects */
+:root {
+  /* Greys */
+  --col-black: #000000;
+  --col-grey-950: #151515;
+  --col-grey-900: #1e1e1e;
+  --col-grey-800: #2f2f2f;
+  --col-grey-100: #f5f5f5;
+  --col-azure-900: #202431;
+  --col-azure-800: #292d3e;
+  --col-azure-600: #51597b;
+  --col-azure-500: #7e818b;
+  --col-sepia-450: #b1a894;
+  --col-sepia-400: #cac0a9;
+  --col-sepia-300: #e3d8be;
+  --col-sepia-100: #fffbe8;
+  --col-sepia-050: #fefefc;
+
+  /* Colors */
+  --col-faff-pink-800: #584355;
+  --col-faff-pink-300: #ffaff3;
+  --col-boi-blue-200: #a6f0fc;
+  --col-menthol-200: #c8ffa7;
+  --col-caramel-300: #ffd596;
+  --col-deep-saffron-400: #ff9d35;
+  --col-tomato-400: #ff6262;
+
+  /* Semantic colors */
+  --brand-primary: var(--col-faff-pink-300);
+  --brand-primary-dim: var(--col-faff-pink-800);
+  --brand-success: var(--col-menthol-200);
+  --brand-warning: var(--col-caramel-300);
+  --brand-error: var(--col-tomato-400);
+
+  /* Light theme */
+  --light-theme-background: var(--col-sepia-050);
+  --light-theme-background-dim: var(--col-grey-100);
+  --light-theme-text: var(--col-black);
+  --light-theme-text-secondary: var(--col-grey-800);
+  --light-theme-code: var(--col-black);
+
+  /* Dark theme */
+  --dark-theme-background: var(--col-azure-800);
+  --dark-theme-background-dim: var(--col-azure-900);
+  --dark-theme-background-alt: var(--col-grey-800);
+  --dark-theme-text: var(--col-sepia-300);
+  --dark-theme-text-secondary: var(--col-sepia-450);
+  --dark-theme-code: var(--col-deep-saffron-400);
+}