math-main-components 0.0.197 → 0.0.198

package/package.json

@@ -1,9 +1,10 @@
 {
     "name": "math-main-components",
-    "version": "0.0.197",
+    "version": "0.0.198",
     "author": "Emilian Scheel",
     "files": [
-        "dist/**/*"
+        "dist/**/*",
+        "styles/**/*"
     ],
     "main": "dist/index.cjs.js",
     "module": "dist/index.esm.js",
@@ -77,4 +78,4 @@
         "storybook": "^7.6.13",
         "stripe": "^14.5.0"
     }
-}
+}

package/styles/font.scss

@@ -0,0 +1,11 @@
+@font-face {
+    font-family: 'Space Grotesk';
+    font-style: normal;
+    src: url("https://pub-cac338ae11a944ff9c57d280468b90e7.r2.dev/font-space-grotesk.ttf") format('ttf');
+}
+
+@font-face {
+    font-family: 'Jakarta Sans';
+    font-style: normal;
+    src: url("https://pub-cac338ae11a944ff9c57d280468b90e7.r2.dev/font-jakarta-sans.ttf") format('ttf');
+}

package/styles/material-symbols.scss

@@ -0,0 +1,24 @@
+@font-face {
+    font-family: 'Material Symbols Outlined';
+    font-style: normal;
+    src: url("https://pub-cac338ae11a944ff9c57d280468b90e7.r2.dev/material-symbols-v156.woff2") format('woff2');
+}
+
+
+.material-symbols,
+.material-symbols-outlined {
+    font-family: 'Material Symbols Outlined';
+    font-weight: 200;
+    font-style: normal;
+    font-size: 24px;
+    /* Preferred icon size */
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+    direction: ltr;
+    user-select: none;
+    -webkit-user-select: none;
+}

package/styles/theme-colors.scss

@@ -0,0 +1,164 @@
+:root {
+    --background-1: #FFFFFF;
+    --background-2: #FAFAFA;
+    --background-3: #FAFAFA; // dark -> black
+    --background-4: #e5e5e5; // dark -> brighter
+    --foreground-1: #000000;
+    --foreground-2: #5C5C5C;
+    --foreground-3: #808080;
+    --foreground-4: #000000;
+    --border-1: #F0F0F0;
+    --border-2: #DFDFDF;
+    --border-3: #B1B1B1;
+
+    --primary-1: #0075FF;
+    --primary-2: #C6D4F8;
+
+    // dark green
+    --forest-1: #156A13;
+    --forest-2: #D9EED8;
+
+    // dark red
+    --wine-1: #6A1313;
+    --wine-2: #EFD4D4;
+
+    // dark blue
+    --navy-1: #1A136A;
+    --navy-2: #D4D5EF;
+
+    // dark pink
+    --cherry-1: #63136A;
+    --cherry-2: #DCB2E7;
+
+    // dark grey
+    --stone-1: #4A4A4A;
+    --stone-2: #B9B9B9;
+
+    // dark yellow
+    --sun-1: #D4A400;
+    --sun-2: #fffbe7;
+
+    // dark orange
+    --pumpkin-1: #D46A00;
+    --pumpkin-2: #FEEED4;
+
+
+    // artichoke
+    --artichoke-1: #314e2b;
+    --artichoke-2: #E8FBD7;
+
+    // desert: 
+    --desert-1: #C19A6B;
+    --desert-2: #FDF7F0;
+
+    // yellow
+    --yellow-1: #D4A400;
+    --yellow-2: #fffbe7;
+
+    // green
+    --green-1: #5B8F26;
+    --green-2: #e8fbd7;
+
+    // red
+    --red-1: #EB4E3E;
+    --red-2: #FFE7E3;
+
+    // blue
+    --blue-1: #2961E5;
+    --blue-2: #ECF3FD;
+
+    // pink
+    --pink-1: #A357D7;
+    --pink-2: #F9F4FD;
+
+    // turquoise
+    --turquoise-1: #00C7BE;
+    --turquoise-2: #E8F9F8;
+
+    // orange
+    --orange-1: #FF9500;
+    --orange-2: #FFF5E3;
+}
+
+:root {
+    .dark-theme {
+        --background-1: #000000;
+        --background-2: #181818;
+        --background-3: #000000;
+        --background-4: #262626;
+        --foreground-1: #FFFFFF;
+        --foreground-2: #A1A1A1;
+        --foreground-3: #888888;
+        --foreground-4: #d6d6d6;
+        --border-1: #242424;
+        --border-2: #333333;
+        --border-3: #414141;
+
+        --primary-1: #0075FF;
+        --primary-2: #2c3347;
+
+        // dark green
+        --forest-1: #36c731;
+        --forest-2: #356431;
+
+        // dark red
+        --wine-1: #f3523a;
+        --wine-2: #863636;
+
+        // dark blue
+        --navy-1: rgb(118, 107, 231);
+        --navy-2: #282b8b;
+
+        // dark pink
+        --cherry-1: #c92cd7;
+        --cherry-2: #7c2592;
+
+        // dark grey
+        --stone-1: #e8e8e8;
+        --stone-2: #4d4b4b;
+
+        // dark yellow
+        --sun-1: #ffdb67;
+        --sun-2: #594c12;
+
+        // dark orange
+        --pumpkin-1: #ef9438;
+        --pumpkin-2: #714d11;
+
+        // artichoke
+        --artichoke-1: #314e2b;
+        --artichoke-2: #4a8e0c;
+
+        // desert: 
+        --desert-1: #C19A6B;
+        --desert-2: #594c12;
+
+        // dark yellow
+        --yellow-1: #ffdb67;
+        --yellow-2: #594c12;
+
+        // green
+        --green-1: #95e941;
+        --green-2: #4a8e0c;
+
+        // red
+        --red-1: #ff5c49;
+        --red-2: #741707;
+
+        // blue
+        --blue-1: #a5c0ff;
+        --blue-2: #1b4a8c;
+
+        // pink
+        --pink-1: #c596e4;
+        --pink-2: #581d88;
+
+        // turquoise
+        --turquoise-1: #00C7BE;
+        --turquoise-2: #21504d;
+
+        // orange
+        --orange-1: #FF9500;
+        --orange-2: #FFF5E3;
+    }
+}

package/styles/theme-styles.scss

@@ -0,0 +1,8 @@
+:root {
+
+    --focus-shadow: 0px 0px 0px 4px #0057FF40;
+    --focus-border: 1px solid var(--primary-1);
+
+    --font-1: 'Space Grotesk', var(--font-2);
+    --font-2: 'Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
+}