ada-ui 0.0.0-20240120121659 → 0.0.0-beta-v5-20240723120941

package/scss/ada.blue-new.scss

@@ -0,0 +1,68 @@
+@import "ada.theme-base";
+
+:root {
+  --bg-body: lch(5 8 260);
+
+  //Defaults to primary color
+  @extend .primary;
+}
+
+.primary {
+  @extend %colourShades;
+
+  --100: 90 17 260;
+  --200: 70 17 260;
+
+  --600: 36 36 260;
+  --700: 29 30 260;
+  --800: 26 29 260;
+  --900: 19 23 260;
+}
+
+.primary-alt {
+  @extend %colourShades;
+
+  --100: 90 17 246;
+  --200: 70 17 246;
+
+  --600: 51 40 246;
+  --700: 44 34 246;
+  --800: 41 33 246;
+  --900: 34 27 246;
+}
+
+.accent {
+  @extend %colourShades;
+
+  --100: 90 17 152;
+  --200: 70 17 152;
+
+  --600: 40 37 152;
+  --700: 33 31 152;
+  --800: 30 30 152;
+  --900: 23 24 152;
+}
+
+.accent-alt {
+  @extend %colourShades;
+
+  --100: 90 17 206;
+  --200: 70 17 206;
+
+  --600: 52 30 206;
+  --700: 45 24 206;
+  --800: 42 23 206;
+  --900: 35 17 206;
+}
+
+.warn {
+  @extend %colourShades;
+
+  --100: 90 17 40;
+  --200: 70 17 40;
+
+  --600: 40 75 40;
+  --700: 33 69 40;
+  --800: 30 68 40;
+  --900: 23 62 40;
+}

package/scss/ada.blue.scss

@@ -21,6 +21,10 @@
   --h-fg: var(--h);
   --s-fg: 100%;
   --l-fg: 89%;
+
+  //lch test
+  //--default: lch(26 29 260);
+  //--default-alpha70: lch(18 20 260);
 }
 
 :root {

package/scss/ada.scss

@@ -1,54 +1,7 @@
-//TODO Use css vars
-$font-family: "Open Sans", sans-serif !default;
-$box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
-
-@mixin desktop() {
-  @media screen and (min-width: 1200px) {
-    @content;
-  }
-}
-
-@mixin tablet() {
-  @media screen and (max-width: 1199px) {
-    @content;
-  }
-}
-
-*,
-::before,
-::after {
-  box-sizing: border-box;
-}
-
-html {
-  font-size: 14px;
-  font-family: $font-family;
-  font-weight: 400;
-  @include tablet {
-    font-size: 12px;
-  }
-}
-
-html,
-body {
-  height: 100%;
-  min-height: 100%;
-  margin: 0;
-  padding: 0;
-  background: var(--bg);
-  color: var(--fg);
-}
-
-body {
-  font-size: 1rem;
-  -webkit-tap-highlight-color: transparent;
-  padding: 0.5rem;
-}
-
+@import "reset";
+@import "global";
 @import "typography";
-@import "button";
+@import "command";
 @import "input";
 @import "panel";
-@import "commands";
-@import "tile";
 @import "spinner";

package/todo

@@ -0,0 +1,6 @@
+- Introduce tokens as css variables
+  - Spacing
+  - Font Sizes
+- Correctly put `:` for pseudo classes and `::` for pseudo elements
+- Only one disabled style for all colors?
+- headlines w/ or w/o margin?

package/tailwind.config.js

@@ -1,15 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ["./src/**/*.{html,jsx,tsx}"],
-  theme: {
-    colors: {
-      brand: {
-        DEFAULT: "#F5A623",
-        dark: "#F5A623",
-        light: "#F5A623",
-      },
-    },
-    extend: {},
-  },
-  plugins: [],
-};