@flux-ui/components 3.0.0-next.3 → 3.0.0-next.30

package/src/css/typography.scss

@@ -7,7 +7,7 @@
 
     h1 {
         color: var(--foreground-prominent);
-        font-size: 30px;
+        font-size: 27px;
     }
 
     h2 {
@@ -33,10 +33,12 @@
     }
 
     a:not([class]), a[class=""] {
-        color: rgb(var(--primary-7));
+        color: var(--primary-600);
         text-decoration: underline;
+        text-decoration-color: var(--primary-400);
+        text-decoration-skip: auto;
         text-decoration-thickness: 1px;
-        text-underline-offset: 4px;
+        text-underline-offset: 2px;
 
         &:hover {
             text-decoration: none;
@@ -44,14 +46,18 @@
     }
 
     p {
-        line-height: 1.8;
+        line-height: 1.6;
+    }
+
+    small {
+        font-size: 14px;
     }
 
     blockquote {
         position: relative;
         margin: 0 0 0 30px;
         padding: 15px 21px;
-        background: rgb(var(--gray-2));
+        background: var(--gray-100);
         border-radius: var(--radius);
 
         &::before {
@@ -59,7 +65,7 @@
             top: 5px;
             left: -27px;
             content: '”';
-            color: rgb(var(--primary-7));
+            color: var(--primary-600);
             font-size: 39px;
             font-weight: 700;
         }
@@ -71,7 +77,7 @@
 
     img:not([class]) {
         height: unset;
-        border-radius: calc(var(--radius) / 2);
+        border-radius: var(--radius-half);
         outline: 1px solid rgb(0 0 0 / .025);
         outline-offset: -1px;
     }

package/src/css/variables.scss

@@ -1,9 +1,5 @@
 @use 'sass:color';
 
-@function -rgb($hex) {
-    @return color.channel($hex, 'red', $space: rgb) color.channel($hex, 'green', $space: rgb) color.channel($hex, 'blue', $space: rgb);
-}
-
 @mixin animation {
     --acceleration-curve: cubic-bezier(0.4, 0, 1, 1);
     --deceleration-curve: cubic-bezier(0, 0, 0.2, 1);
@@ -12,203 +8,239 @@
 }
 
 @mixin color-light {
-    --primary-0: #{-rgb(#ffffff)};
-    --primary-1: #{-rgb(#f5f8ff)};
-    --primary-2: #{-rgb(#eff4ff)};
-    --primary-3: #{-rgb(#d1e0ff)};
-    --primary-4: #{-rgb(#b2ccff)};
-    --primary-5: #{-rgb(#84adff)};
-    --primary-6: #{-rgb(#528bff)};
-    --primary-7: #{-rgb(#2970ff)};
-    --primary-8: #{-rgb(#155eef)};
-    --primary-9: #{-rgb(#004eeb)};
-    --primary-10: #{-rgb(#0040c1)};
-    --primary-11: #{-rgb(#00359e)};
-
-    --danger-0: #{-rgb(#ffffff)};
-    --danger-1: #{-rgb(#fff1f2)};
-    --danger-2: #{-rgb(#ffe4e6)};
-    --danger-3: #{-rgb(#ffccd3)};
-    --danger-4: #{-rgb(#ffa1ad)};
-    --danger-5: #{-rgb(#ff637e)};
-    --danger-6: #{-rgb(#ff2056)};
-    --danger-7: #{-rgb(#ec003f)};
-    --danger-8: #{-rgb(#c70036)};
-    --danger-9: #{-rgb(#a50036)};
-    --danger-10: #{-rgb(#8b0836)};
-    --danger-11: #{-rgb(#4d0218)};
-
-    --info-0: #{-rgb(#ffffff)};
-    --info-1: #{-rgb(#eff6ff)};
-    --info-2: #{-rgb(#dbeafe)};
-    --info-3: #{-rgb(#bedbff)};
-    --info-4: #{-rgb(#8ec5ff)};
-    --info-5: #{-rgb(#51a2ff)};
-    --info-6: #{-rgb(#2b7fff)};
-    --info-7: #{-rgb(#155dfc)};
-    --info-8: #{-rgb(#1447e6)};
-    --info-9: #{-rgb(#193cb8)};
-    --info-10: #{-rgb(#1c398e)};
-    --info-11: #{-rgb(#162456)};
-
-    --success-0: #{-rgb(#ffffff)};
-    --success-1: #{-rgb(#f0fdf4)};
-    --success-2: #{-rgb(#dcfce7)};
-    --success-3: #{-rgb(#b9f8cf)};
-    --success-4: #{-rgb(#7bf1a8)};
-    --success-5: #{-rgb(#05df72)};
-    --success-6: #{-rgb(#00c950)};
-    --success-7: #{-rgb(#00a63e)};
-    --success-8: #{-rgb(#008236)};
-    --success-9: #{-rgb(#016630)};
-    --success-10: #{-rgb(#0d542b)};
-    --success-11: #{-rgb(#032e15)};
-
-    --warning-0: #{-rgb(#ffffff)};
-    --warning-1: #{-rgb(#fffbeb)};
-    --warning-2: #{-rgb(#fef3c6)};
-    --warning-3: #{-rgb(#fee685)};
-    --warning-4: #{-rgb(#ffd230)};
-    --warning-5: #{-rgb(#ffb900)};
-    --warning-6: #{-rgb(#fe9a00)};
-    --warning-7: #{-rgb(#e17100)};
-    --warning-8: #{-rgb(#bb4d00)};
-    --warning-9: #{-rgb(#973c00)};
-    --warning-10: #{-rgb(#7b3306)};
-    --warning-11: #{-rgb(#461901)};
-
-    --gray-0: #{-rgb(#ffffff)};
-    --gray-1: #{-rgb(#f8fafc)};
-    --gray-2: #{-rgb(#f1f5f9)};
-    --gray-3: #{-rgb(#e2e8f0)};
-    --gray-4: #{-rgb(#cad5e2)};
-    --gray-5: #{-rgb(#90a1b9)};
-    --gray-6: #{-rgb(#62748e)};
-    --gray-7: #{-rgb(#45556c)};
-    --gray-8: #{-rgb(#314158)};
-    --gray-9: #{-rgb(#1d293d)};
-    --gray-10: #{-rgb(#0f172b)};
-    --gray-11: #{-rgb(#020618)};
+    --gray-25: #ffffff;
+    --gray-50: #f7f8fc;
+    --gray-100: #eceef4;
+    --gray-200: #dee1ea;
+    --gray-300: #c6cad5;
+    --gray-400: #9da4b8;
+    --gray-500: #848ca2;
+    --gray-600: #606881;
+    --gray-700: #3f475e;
+    --gray-800: #2d3241;
+    --gray-900: #1a1f2d;
+    --gray-950: #090c19;
+
+    //--gray-25: #ffffff;
+    //--gray-50: #f9fafb;
+    //--gray-100: #f3f4f6;
+    //--gray-200: #e5e7eb;
+    //--gray-300: #d1d5db;
+    //--gray-400: #9ca3af;
+    //--gray-500: #6b7280;
+    //--gray-600: #4b5563;
+    //--gray-700: #374151;
+    //--gray-800: #1f2937;
+    //--gray-900: #111827;
+    //--gray-950: #030712;
+
+    //--gray-25: #ffffff;
+    //--gray-50: #f9fafb;
+    //--gray-100: #f1f5f9;
+    //--gray-200: #e2e8f0;
+    //--gray-300: #cbd5e1;
+    //--gray-400: #94a3b8;
+    //--gray-500: #64748b;
+    //--gray-600: #475569;
+    //--gray-700: #334155;
+    //--gray-800: #1e293b;
+    //--gray-900: #0f172a;
+    //--gray-950: #020617;
+
+    --primary-25: #fcfcfc;
+    --primary-50: #ebf2ff;
+    --primary-100: #d7e5ff;
+    --primary-200: #c4d8ff;
+    --primary-300: #9dbdff;
+    --primary-400: #77a2fc;
+    --primary-500: #5285f8;
+    --primary-600: #2258e5;
+    --primary-700: #0935b1;
+    --primary-800: #011e8c;
+    --primary-900: #000f60;
+    --primary-950: #000337;
+
+    --danger-25: #fefbfa;
+    --danger-50: #fff1f2;
+    --danger-100: #ffe4e6;
+    --danger-200: #ffccd3;
+    --danger-300: #ffa1ac;
+    --danger-400: #ff637e;
+    --danger-500: #ff2054;
+    --danger-600: #ec003e;
+    --danger-700: #c70036;
+    --danger-800: #a50035;
+    --danger-900: #8b0836;
+    --danger-950: #4d0218;
+
+    --info-25: #f9fcff;
+    --info-50: #eff6ff;
+    --info-100: #dbeafe;
+    --info-200: #bedbff;
+    --info-300: #8dc5ff;
+    --info-400: #52a2ff;
+    --info-500: #297fff;
+    --info-600: #165dfc;
+    --info-700: #1048e6;
+    --info-800: #163cb8;
+    --info-900: #1b398e;
+    --info-950: #162456;
+
+    --success-25: #fafdfa;
+    --success-50: #f0fdf4;
+    --success-100: #dcfce7;
+    --success-200: #b9f8cf;
+    --success-300: #7af1a9;
+    --success-400: #00df73;
+    --success-500: #00c951;
+    --success-600: #08a63d;
+    --success-700: #028236;
+    --success-800: #03662f;
+    --success-900: #0d542a;
+    --success-950: #032e15;
+
+    --warning-25: #fdfcf8;
+    --warning-50: #fffbeb;
+    --warning-100: #fef3c6;
+    --warning-200: #fee685;
+    --warning-300: #ffd22f;
+    --warning-400: #ffb902;
+    --warning-500: #ff9717;
+    --warning-600: #dd7500;
+    --warning-700: #b55500;
+    --warning-800: #934200;
+    --warning-900: #793600;
+    --warning-950: #451b00;
 }
 
 @mixin color-dark {
-    //--primary-0: #{-rgb(#182035)};
-    //--primary-1: #{-rgb(#1f2a45)};
-    //--primary-2: #{-rgb(#243254)};
-    //--primary-3: #{-rgb(#2b3c63)};
-    //--primary-4: #{-rgb(#314471)};
-    //--primary-5: #{-rgb(#385080)};
-    //--primary-6: #{-rgb(#3e5a8e)};
-    //--primary-7: #{-rgb(#44669e)};
-    //--primary-8: #{-rgb(#5077b0)};
-    //--primary-9: #{-rgb(#5a84bf)};
-    //--primary-10: #{-rgb(#6594d1)};
-    //--primary-11: #{-rgb(#709fe3)};
-
-    --danger-0: #{-rgb(#272325)};
-    --danger-1: #{-rgb(#331e23)};
-    --danger-2: #{-rgb(#3e1f28)};
-    --danger-3: #{-rgb(#4c222e)};
-    --danger-4: #{-rgb(#5b2635)};
-    --danger-5: #{-rgb(#6a2b3e)};
-    --danger-6: #{-rgb(#7a3047)};
-    --danger-7: #{-rgb(#8b3552)};
-    --danger-8: #{-rgb(#9e3a5f)};
-    --danger-9: #{-rgb(#a53d6e)};
-    --danger-10: #{-rgb(#b63e7c)};
-    --danger-11: #{-rgb(#c8408c)};
-
-    --info-0: #{-rgb(#23262c)};
-    --info-1: #{-rgb(#1f2832)};
-    --info-2: #{-rgb(#243141)};
-    --info-3: #{-rgb(#2a3d52)};
-    --info-4: #{-rgb(#2f4a66)};
-    --info-5: #{-rgb(#34567b)};
-    --info-6: #{-rgb(#3b638f)};
-    --info-7: #{-rgb(#436fa3)};
-    --info-8: #{-rgb(#4b7bb7)};
-    --info-9: #{-rgb(#5588cb)};
-    --info-10: #{-rgb(#6094df)};
-    --info-11: #{-rgb(#6aa3f3)};
-
-    --success-0: #{-rgb(#1d2620)};
-    --success-1: #{-rgb(#222d26)};
-    --success-2: #{-rgb(#26342c)};
-    --success-3: #{-rgb(#2c4435)};
-    --success-4: #{-rgb(#33543e)};
-    --success-5: #{-rgb(#3a6547)};
-    --success-6: #{-rgb(#417651)};
-    --success-7: #{-rgb(#4b875d)};
-    --success-8: #{-rgb(#589967)};
-    --success-9: #{-rgb(#6eac74)};
-    --success-10: #{-rgb(#86ba86)};
-    --success-11: #{-rgb(#9bc89b)};
-
-    --warning-0: #{-rgb(#2b261a)};
-    --warning-1: #{-rgb(#332b1b)};
-    --warning-2: #{-rgb(#3d321e)};
-    --warning-3: #{-rgb(#4a3c21)};
-    --warning-4: #{-rgb(#554825)};
-    --warning-5: #{-rgb(#63552a)};
-    --warning-6: #{-rgb(#74602f)};
-    --warning-7: #{-rgb(#8a6c34)};
-    --warning-8: #{-rgb(#a37b3a)};
-    --warning-9: #{-rgb(#c19041)};
-    --warning-10: #{-rgb(#d5a048)};
-    --warning-11: #{-rgb(#eab14f)};
-
-    --gray-0: #{-rgb(#14161a)};
-    --gray-1: #{-rgb(#1b1d21)};
-    --gray-2: #{-rgb(#22252b)};
-    --gray-3: #{-rgb(#2a2d33)};
-    --gray-4: #{-rgb(#333b3d)};
-    --gray-5: #{-rgb(#3d464a)};
-    --gray-6: #{-rgb(#475055)};
-    --gray-7: #{-rgb(#515d60)};
-    --gray-8: #{-rgb(#5c696b)};
-    --gray-9: #{-rgb(#677577)};
-    --gray-10: #{-rgb(#738180)};
-    --gray-11: #{-rgb(#7f8c8c)};
+    --gray-25: #0c0d12;
+    --gray-50: #121419;
+    --gray-100: #1a1d24;
+    --gray-200: #23262f;
+    --gray-300: #363a45;
+    --gray-400: #494f61;
+    --gray-500: #5e657b;
+    --gray-600: #7f88a2;
+    --gray-700: #a4adc8;
+    --gray-800: #c0c7da;
+    --gray-900: #dae1f5;
+    --gray-950: #f4fbff;
+
+    --primary-25: #23262c;
+    --primary-50: #262c39;
+    --primary-100: #2a3448;
+    --primary-200: #303e5a;
+    --primary-300: #36486e;
+    --primary-400: #3e5585;
+    --primary-500: #44619d;
+    --primary-600: #4d6fb6;
+    --primary-700: #5980d3;
+    --primary-800: #6a96f5;
+    --primary-900: #77a7ff;
+    --primary-950: #85b8ff;
+
+    --danger-25: #272325;
+    --danger-50: #37272b;
+    --danger-100: #452c30;
+    --danger-200: #563237;
+    --danger-300: #69393d;
+    --danger-400: #7f4145;
+    --danger-500: #94484c;
+    --danger-600: #ab5155;
+    --danger-700: #c65d64;
+    --danger-800: #e66f7a;
+    --danger-900: #fd7c8c;
+    --danger-950: #ff8ba0;
+
+    --info-25: #23262c;
+    --info-50: #252c39;
+    --info-100: #283447;
+    --info-200: #2c3f59;
+    --info-300: #2e4b6d;
+    --info-400: #315884;
+    --info-500: #33659b;
+    --info-600: #3874b4;
+    --info-700: #4285d1;
+    --info-800: #539cf3;
+    --info-900: #5dadff;
+    --info-950: #6bbfff;
+
+    --success-25: #1d2620;
+    --success-50: #223027;
+    --success-100: #243a2b;
+    --success-200: #264632;
+    --success-300: #285438;
+    --success-400: #2b643f;
+    --success-500: #2d7345;
+    --success-600: #32844c;
+    --success-700: #3b9956;
+    --success-800: #4cb265;
+    --success-900: #59c56f;
+    --success-950: #6ad87b;
+
+    --warning-25: #2b261a;
+    --warning-50: #322b1b;
+    --warning-100: #3c331e;
+    --warning-200: #493c21;
+    --warning-300: #574725;
+    --warning-400: #68532a;
+    --warning-500: #785e30;
+    --warning-600: #8c6b35;
+    --warning-700: #a47a3b;
+    --warning-800: #c28f42;
+    --warning-900: #d89e4a;
+    --warning-950: #efae52;
 }
 
-@mixin default-light {
+@mixin defaults {
     --font-monospace: jetbrains-mono, monospace;
     --font-sans: inter-variable, sans-serif;
     --font-serif: serif;
     --font-size: 15px;
-    --radius: 9px;
-
-    --background: rgb(var(--gray-2));
-
-    --foreground: rgb(var(--gray-8));
-    --foreground-prominent: rgb(var(--gray-10));
-    --foreground-secondary: rgb(var(--gray-5));
+    --radius: 12px;
+    --radius-double: 24px;
+    --radius-half: 6px;
+
+    --background: var(--gray-50);
+    --foreground: var(--gray-700);
+    --foreground-prominent: var(--gray-900);
+    --foreground-secondary: var(--gray-500);
+    --surface: var(--gray-25);
+    --surface-loader: rgb(from var(--gray-25) r g b / .75);
+    --surface-stroke: var(--gray-200);
+    --surface-stroke-hover: var(--gray-300);
+    --surface-stroke-out: rgb(from var(--gray-900) r g b / .1);
+    --surface-stroke-out-hover: rgb(from var(--gray-950) r g b / .1);
+    --surface-hover: var(--gray-50);
+    --surface-active: var(--gray-100);
+    --surface-disabled: var(--gray-100);
+
+    --overlay: rgb(from var(--gray-950) r g b / .3);
+    --overlay-secondary: rgb(from var(--gray-950) r g b / .15);
 }
 
-@mixin default-dark {
-    --background: rgb(var(--gray-2));
-
-    --foreground: #cbd5e1;
-    --foreground-prominent: #ffffff;
-    --foreground-secondary: #64748b;
+@mixin defaults-dark {
+    --overlay: rgb(0 0 0 / .6);
+    --overlay-secondary: rgb(0 0 0 / .4);
 }
 
 @mixin shadow-light {
-    --shadow-px: 0 1px 1px rgb(29 41 61 / .025);
-    --shadow-xs: 0 1px 2px 0 rgb(29 41 61 / .025);
-    --shadow-sm: 0 1px 3px rgb(29 41 61 / .05), 0 1px 2px -1px rgb(29 41 61 / .05);
-    --shadow-md: 0 4px 6px -1px rgb(29 41 61 / .05), 0 2px 4px -2px rgb(29 41 61 / .05);
-    --shadow-lg: 0 10px 15px -3px rgb(29 41 61 / .05), 0 4px 6px -4px rgb(29 41 61 / .05);
-    --shadow-xl: 0 20px 25px -5px rgb(29 41 61 / .05), 0 8px 10px -6px rgb(29 41 61 / .05);
-    --shadow-2xl: 0 25px 50px -12px rgb(29 41 61 / .125);
+    --shadow-px: 0 1px 1px rgb(from var(--gray-800) r g b / 0.02);
+    --shadow-xs: 0 1px 2px 0 rgb(from var(--gray-800) r g b / 0.02);
+    --shadow-sm: 0 1px 3px rgb(from var(--gray-800) r g b / 0.05), 0 1px 2px -1px rgb(from var(--gray-800) r g b / 0.05);
+    --shadow-md: 0 4px 6px -1px rgb(from var(--gray-800) r g b / 0.05), 0 2px 4px -2px rgb(from var(--gray-800) r g b / 0.05);
+    --shadow-lg: 0 10px 15px -3px rgb(from var(--gray-800) r g b / 0.05), 0 4px 6px -4px rgb(from var(--gray-800) r g b / 0.05);
+    --shadow-xl: 0 20px 25px -5px rgb(from var(--gray-800) r g b / 0.05), 0 8px 10px -6px rgb(from var(--gray-800) r g b / 0.05);
+    --shadow-2xl: 0 25px 50px -12px rgb(from var(--gray-800) r g b / 0.12);
 }
 
 @mixin shadow-dark {
-    --shadow-px: 0 1px 1px rgb(0 0 0 / .05);
-    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .05);
-    --shadow-sm: 0 1px 3px rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
-    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
-    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
-    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
-    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / .25);
+    --shadow-px: 0 1px 1px rgb(0 0 0 / 0.1);
+    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.1);
+    --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.15), 0 1px 2px -1px rgb(0 0 0 / 0.15);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.15), 0 2px 4px -2px rgb(0 0 0 / 0.15);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.15), 0 4px 6px -4px rgb(0 0 0 / 0.15);
+    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.15), 0 8px 10px -6px rgb(0 0 0 / 0.15);
+    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
 }

package/src/data/di.ts

@@ -7,6 +7,7 @@ export const FluxFlyoutInjectionKey: InjectionKey<FluxFlyoutInjection> = Symbol(
 export const FluxFilterInjectionKey: InjectionKey<FluxFilterInjection> = Symbol();
 export const FluxFormFieldInjectionKey: InjectionKey<FluxFormFieldInjection> = Symbol();
 export const FluxTableInjectionKey: InjectionKey<FluxTableInjection> = Symbol();
+export const FluxTooltipInjectionKey: InjectionKey<FluxTooltipInjection> = Symbol();
 
 export type FluxExpandableGroupInjection = {
     closeAll(): void;
@@ -40,3 +41,7 @@ export type FluxTableInjection = {
     readonly isSeparated: boolean;
     readonly isStriped: boolean;
 };
+
+export type FluxTooltipInjection = {
+    calculate(): void;
+};