@wavv/ui 2.2.7 → 2.3.0-alpha.1

package/build/tailwind/theme.css

@@ -115,6 +115,123 @@
   --color-background5: #596A74;
 }
 
+.mono {
+  --color-logo1: #0074F4;
+  --color-logo2: #00A9E2;
+  --color-logo3: #67C728;
+  --color-brand: #0074F4;
+  --color-brandShade1: #0068DC;
+  --color-brandShade2: #005DC3;
+  --color-brandDark: #4C9EF7;
+  --color-brandDarkShade1: #5EA8F8;
+  --color-brandTint0: rgba(0,116,244,0.05);
+  --color-brandTint1: rgba(0,116,244,0.1);
+  --color-brandTint2: rgba(0,116,244,0.2);
+  --color-brandTint3: rgba(0,116,244,0.3);
+  --color-brandTint4: rgba(0,116,244,0.4);
+  --color-brandBackground0: #121212;
+  --color-brandBackground1: #1e1e1e;
+  --color-brandBackground2: #292929;
+  --color-brandBackground3: #3a3a3a;
+  --color-brandBackground4: #4b4b4b;
+  --color-brandBackground5: #5c5c5c;
+  --color-error: #FF6068;
+  --color-errorShade1: #E6565E;
+  --color-errorShade2: #CC4D53;
+  --color-errorTint0: rgba(255,96,104,0.05);
+  --color-errorTint1: rgba(255,96,104,0.1);
+  --color-errorTint2: rgba(255,96,104,0.2);
+  --color-errorTint3: rgba(255,96,104,0.3);
+  --color-errorTint4: rgba(255,96,104,0.4);
+  --color-warning: #FF9900;
+  --color-warningShade1: #E68A00;
+  --color-warningShade2: #CC7A00;
+  --color-warningTint0: rgba(255,153,0,0.05);
+  --color-warningTint1: rgba(255,153,0,0.1);
+  --color-warningTint2: rgba(255,153,0,0.2);
+  --color-warningTint3: rgba(255,153,0,0.3);
+  --color-warningTint4: rgba(255,153,0,0.4);
+  --color-alert: #F0BB00;
+  --color-alertShade1: #E4B200;
+  --color-alertShade2: #C09600;
+  --color-alertTint0: rgba(240,187,0,0.05);
+  --color-alertTint1: rgba(240,187,0,0.1);
+  --color-alertTint2: rgba(240,187,0,0.2);
+  --color-alertTint3: rgba(240,187,0,0.3);
+  --color-alertTint4: rgba(240,187,0,0.4);
+  --color-success: #00E284;
+  --color-successShade1: #00AF3B;
+  --color-successShade2: #009B35;
+  --color-successTint0: rgba(0,226,132,0.05);
+  --color-successTint1: rgba(0,226,132,0.1);
+  --color-successTint2: rgba(0,226,132,0.2);
+  --color-successTint3: rgba(0,226,132,0.3);
+  --color-successTint4: rgba(0,226,132,0.4);
+  --color-grayscale0: rgba(18,18,18,0.05);
+  --color-grayscale1: rgba(18,18,18,0.1);
+  --color-grayscale2: rgba(18,18,18,0.2);
+  --color-grayscale3: rgba(18,18,18,0.3);
+  --color-grayscale4: rgba(18,18,18,0.4);
+  --color-grayscale5: rgba(18,18,18,0.5);
+  --color-grayscale6: rgba(18,18,18,0.6);
+  --color-grayscale7: rgba(18,18,18,0.7);
+  --color-grayscale8: rgba(18,18,18,0.8);
+  --color-grayscale9: rgba(18,18,18,0.9);
+  --color-grayscale10: #121212;
+  --color-contrast0: rgba(255,255,255,0.05);
+  --color-contrast1: rgba(255,255,255,0.1);
+  --color-contrast2: rgba(255,255,255,0.2);
+  --color-contrast3: rgba(255,255,255,0.3);
+  --color-contrast4: rgba(255,255,255,0.4);
+  --color-contrast5: rgba(255,255,255,0.5);
+  --color-contrast6: rgba(255,255,255,0.6);
+  --color-contrast7: rgba(255,255,255,0.7);
+  --color-contrast8: rgba(255,255,255,0.8);
+  --color-contrast9: rgba(255,255,255,0.9);
+  --color-contrast10: #FFFFFF;
+  --color-scale0: rgba(18,18,18,0.05);
+  --color-scale1: rgba(18,18,18,0.1);
+  --color-scale2: rgba(18,18,18,0.2);
+  --color-scale3: rgba(18,18,18,0.3);
+  --color-scale4: rgba(18,18,18,0.4);
+  --color-scale5: rgba(18,18,18,0.5);
+  --color-scale6: rgba(18,18,18,0.6);
+  --color-scale7: rgba(18,18,18,0.7);
+  --color-scale8: rgba(18,18,18,0.8);
+  --color-scale9: rgba(18,18,18,0.9);
+  --color-scale10: #121212;
+  --color-accent: #0074F4;
+  --color-accentShade: #0068DC;
+  --color-background0: #FFFFFF;
+  --color-background1: #F2F3F4;
+  --color-background2: #E6E9EB;
+  --color-background3: #CCD2D6;
+  --color-background4: #B3BCC2;
+  --color-background5: #99A5AD;
+}
+
+.mono.dark {
+  --color-scale0: rgba(255,255,255,0.05);
+  --color-scale1: rgba(255,255,255,0.1);
+  --color-scale2: rgba(255,255,255,0.2);
+  --color-scale3: rgba(255,255,255,0.3);
+  --color-scale4: rgba(255,255,255,0.4);
+  --color-scale5: rgba(255,255,255,0.5);
+  --color-scale6: rgba(255,255,255,0.6);
+  --color-scale7: rgba(255,255,255,0.7);
+  --color-scale8: rgba(255,255,255,0.8);
+  --color-scale9: rgba(255,255,255,0.9);
+  --color-scale10: #FFFFFF;
+  --color-accent: #4C9EF7;
+  --color-accentShade: #5EA8F8;
+  --color-background0: #121212;
+  --color-background1: #1e1e1e;
+  --color-background2: #292929;
+  --color-background3: #3a3a3a;
+  --color-background4: #4b4b4b;
+  --color-background5: #5c5c5c;
+}
+
 @utility head-1 {
 	font-size: 28px;
 	font-weight: 500;

package/build/theme/index.d.ts

@@ -2,14 +2,17 @@ import type { ITheme } from './ThemeTypes';
 type Theme = {
     light: ITheme;
     dark: ITheme;
+    monoDark: ITheme;
+    monoLight: ITheme;
 };
 declare const theme: Theme;
 export default theme;
 export type { ButtonState, ITheme, ThemeProp } from './ThemeTypes';
-export type ThemeClasses = 'light' | 'dark';
+export type ThemeClasses = 'light' | 'dark' | 'mono';
+export type ThemeOptionId = 'light' | 'dark' | 'monoDark' | 'monoLight';
 export declare const themeClasses: ThemeClasses[];
 export type ThemeOption = {
-    id: 'light' | 'dark';
+    id: ThemeOptionId;
     value: string;
     classes: ThemeClasses[];
 };

package/build/theme/index.js

@@ -1,13 +1,18 @@
 import dark from "./core/dark/dark.js";
 import light from "./core/light/light.js";
+import dark_dark from "./mono/dark/dark.js";
+import light_light from "./mono/light/light.js";
 const theme = {
     light: light,
-    dark: dark
+    dark: dark,
+    monoDark: dark_dark,
+    monoLight: light_light
 };
 const lib_theme = theme;
 const themeClasses = [
     'light',
-    'dark'
+    'dark',
+    'mono'
 ];
 const themeOptions = [
     {
@@ -23,6 +28,22 @@ const themeOptions = [
         classes: [
             'dark'
         ]
+    },
+    {
+        id: 'monoDark',
+        value: 'Mono Dark',
+        classes: [
+            'mono',
+            'dark'
+        ]
+    },
+    {
+        id: 'monoLight',
+        value: 'Mono Light',
+        classes: [
+            'mono',
+            'light'
+        ]
     }
 ];
 export { lib_theme as default, themeClasses, themeOptions };

package/build/theme/mono/colors.d.ts

@@ -0,0 +1,224 @@
+declare const colors: {
+    logo1: string;
+    logo2: string;
+    logo3: string;
+    brand: string;
+    brandShade1: string;
+    brandShade2: string;
+    brandDark: string;
+    brandDarkShade1: string;
+    brandTint0: string;
+    brandTint1: string;
+    brandTint2: string;
+    brandTint3: string;
+    brandTint4: string;
+    brandBackground0: string;
+    brandBackground1: string;
+    brandBackground2: string;
+    brandBackground3: string;
+    brandBackground4: string;
+    brandBackground5: string;
+    error: string;
+    errorShade1: string;
+    errorShade2: string;
+    errorTint0: string;
+    errorTint1: string;
+    errorTint2: string;
+    errorTint3: string;
+    errorTint4: string;
+    warning: string;
+    warningShade1: string;
+    warningShade2: string;
+    warningTint0: string;
+    warningTint1: string;
+    warningTint2: string;
+    warningTint3: string;
+    warningTint4: string;
+    alert: string;
+    alertShade1: string;
+    alertShade2: string;
+    alertTint0: string;
+    alertTint1: string;
+    alertTint2: string;
+    alertTint3: string;
+    alertTint4: string;
+    success: string;
+    successShade1: string;
+    successShade2: string;
+    successTint0: string;
+    successTint1: string;
+    successTint2: string;
+    successTint3: string;
+    successTint4: string;
+    grayscale0: string;
+    grayscale1: string;
+    grayscale2: string;
+    grayscale3: string;
+    grayscale4: string;
+    grayscale5: string;
+    grayscale6: string;
+    grayscale7: string;
+    grayscale8: string;
+    grayscale9: string;
+    grayscale10: string;
+    contrast0: string;
+    contrast1: string;
+    contrast2: string;
+    contrast3: string;
+    contrast4: string;
+    contrast5: string;
+    contrast6: string;
+    contrast7: string;
+    contrast8: string;
+    contrast9: string;
+    contrast10: string;
+};
+export default colors;
+export interface IColors {
+    /** #0074F4 */
+    logo1: string;
+    /** #00A9E2 */
+    logo2: string;
+    /** #67C728 */
+    logo3: string;
+    /** #0074F4 */
+    brand: string;
+    /** #0068DC */
+    brandShade1: string;
+    /** #005DC3 */
+    brandShade2: string;
+    /** #4C9EF7 */
+    brandDark: string;
+    /** #5EA8F8 */
+    brandDarkShade1: string;
+    /** 5% of #0074F4 */
+    brandTint0: string;
+    /** 10% of #0074F4 */
+    brandTint1: string;
+    /** 20% of #0074F4 */
+    brandTint2: string;
+    /** 30% of #0074F4 */
+    brandTint3: string;
+    /** 40% of #0074F4 */
+    brandTint4: string;
+    /** #001828 */
+    brandBackground0: string;
+    /** #0D2433 */
+    brandBackground1: string;
+    /** #192F3D */
+    brandBackground2: string;
+    /** #334653 */
+    brandBackground3: string;
+    /** #475964 */
+    brandBackground4: string;
+    /** #596A74 */
+    brandBackground5: string;
+    /** #FF6068 */
+    error: string;
+    /** #E6565E */
+    errorShade1: string;
+    /** #CC4D53 */
+    errorShade2: string;
+    /** 5% of #FF6068 */
+    errorTint0: string;
+    /** 10% of #FF6068 */
+    errorTint1: string;
+    /** 20% of #FF6068 */
+    errorTint2: string;
+    /** 30% of #FF6068 */
+    errorTint3: string;
+    /** 40% of #FF6068 */
+    errorTint4: string;
+    /** #FF9900 */
+    warning: string;
+    /** #E68A00 */
+    warningShade1: string;
+    /** #CC7A00 */
+    warningShade2: string;
+    /** 5% of #FF9900 */
+    warningTint0: string;
+    /** 10% of #FF9900 */
+    warningTint1: string;
+    /** 20% of #FF9900 */
+    warningTint2: string;
+    /** 30% of #FF9900 */
+    warningTint3: string;
+    /** 40% of #FF9900 */
+    warningTint4: string;
+    /** #F0BB00 */
+    alert: string;
+    /** #E4B200 */
+    alertShade1: string;
+    /** #C09600 */
+    alertShade2: string;
+    /** 5% of #F0BB00 */
+    alertTint0: string;
+    /** 10% of #F0BB00 */
+    alertTint1: string;
+    /** 20% of #F0BB00 */
+    alertTint2: string;
+    /** 30% of #F0BB00 */
+    alertTint3: string;
+    /** 40% of #F0BB00 */
+    alertTint4: string;
+    /** #00C242 */
+    success: string;
+    /** #00AF3B */
+    successShade1: string;
+    /** #009B35 */
+    successShade2: string;
+    /** 5% of #00C242 */
+    successTint0: string;
+    /** 10% of #00C242 */ successTint1: string;
+    /** 20% of #00C242 */
+    successTint2: string;
+    /** 30% of #00C242 */
+    successTint3: string;
+    /** 40% of #00C242 */
+    successTint4: string;
+    /** 5% of #001D32 */
+    grayscale0: string;
+    /** 10% of #001D32 */
+    grayscale1: string;
+    /** 20% of #001D32 */
+    grayscale2: string;
+    /** 30% of #001D32 */
+    grayscale3: string;
+    /** 40% of #001D32 */
+    grayscale4: string;
+    /** 50% of #001D32 */
+    grayscale5: string;
+    /** 60% of #001D32 */
+    grayscale6: string;
+    /** 70% of #001D32 */
+    grayscale7: string;
+    /** 80% of #001D32 */
+    grayscale8: string;
+    /** 90% of #001D32 */
+    grayscale9: string;
+    /** #001D32 */
+    grayscale10: string;
+    /** 5% of #FFFFFF */
+    contrast0: string;
+    /** 10% of #FFFFFF */
+    contrast1: string;
+    /** 20% of #FFFFFF */
+    contrast2: string;
+    /** 30% of #FFFFFF */
+    contrast3: string;
+    /** 40% of #FFFFFF */
+    contrast4: string;
+    /** 50% of #FFFFFF */
+    contrast5: string;
+    /** 60% of #FFFFFF */
+    contrast6: string;
+    /** 70% of #FFFFFF */
+    contrast7: string;
+    /** 80% of #FFFFFF */
+    contrast8: string;
+    /** 90% of #FFFFFF */
+    contrast9: string;
+    /** #FFFFFF */
+    contrast10: string;
+}
+export type ColorNames = keyof typeof colors;

package/build/theme/mono/colors.js

@@ -0,0 +1,85 @@
+import { transparentize } from "polished";
+const brand = '#0074F4';
+const error = '#FF6068';
+const warning = '#FF9900';
+const alertColor = '#F0BB00';
+const success = '#00E284';
+const grayVal = '#121212';
+const white = '#FFFFFF';
+const colors = {
+    logo1: brand,
+    logo2: '#00A9E2',
+    logo3: '#67C728',
+    brand,
+    brandShade1: '#0068DC',
+    brandShade2: '#005DC3',
+    brandDark: '#4C9EF7',
+    brandDarkShade1: '#5EA8F8',
+    brandTint0: transparentize(0.95, brand),
+    brandTint1: transparentize(0.9, brand),
+    brandTint2: transparentize(0.8, brand),
+    brandTint3: transparentize(0.7, brand),
+    brandTint4: transparentize(0.6, brand),
+    brandBackground0: '#121212',
+    brandBackground1: '#1e1e1e',
+    brandBackground2: '#292929',
+    brandBackground3: '#3a3a3a',
+    brandBackground4: '#4b4b4b',
+    brandBackground5: '#5c5c5c',
+    error,
+    errorShade1: '#E6565E',
+    errorShade2: '#CC4D53',
+    errorTint0: transparentize(0.95, error),
+    errorTint1: transparentize(0.9, error),
+    errorTint2: transparentize(0.8, error),
+    errorTint3: transparentize(0.7, error),
+    errorTint4: transparentize(0.6, error),
+    warning,
+    warningShade1: '#E68A00',
+    warningShade2: '#CC7A00',
+    warningTint0: transparentize(0.95, warning),
+    warningTint1: transparentize(0.9, warning),
+    warningTint2: transparentize(0.8, warning),
+    warningTint3: transparentize(0.7, warning),
+    warningTint4: transparentize(0.6, warning),
+    alert: alertColor,
+    alertShade1: '#E4B200',
+    alertShade2: '#C09600',
+    alertTint0: transparentize(0.95, alertColor),
+    alertTint1: transparentize(0.9, alertColor),
+    alertTint2: transparentize(0.8, alertColor),
+    alertTint3: transparentize(0.7, alertColor),
+    alertTint4: transparentize(0.6, alertColor),
+    success,
+    successShade1: '#00AF3B',
+    successShade2: '#009B35',
+    successTint0: transparentize(0.95, success),
+    successTint1: transparentize(0.9, success),
+    successTint2: transparentize(0.8, success),
+    successTint3: transparentize(0.7, success),
+    successTint4: transparentize(0.6, success),
+    grayscale0: transparentize(0.95, grayVal),
+    grayscale1: transparentize(0.9, grayVal),
+    grayscale2: transparentize(0.8, grayVal),
+    grayscale3: transparentize(0.7, grayVal),
+    grayscale4: transparentize(0.6, grayVal),
+    grayscale5: transparentize(0.5, grayVal),
+    grayscale6: transparentize(0.4, grayVal),
+    grayscale7: transparentize(0.3, grayVal),
+    grayscale8: transparentize(0.2, grayVal),
+    grayscale9: transparentize(0.1, grayVal),
+    grayscale10: grayVal,
+    contrast0: transparentize(0.95, white),
+    contrast1: transparentize(0.9, white),
+    contrast2: transparentize(0.8, white),
+    contrast3: transparentize(0.7, white),
+    contrast4: transparentize(0.6, white),
+    contrast5: transparentize(0.5, white),
+    contrast6: transparentize(0.4, white),
+    contrast7: transparentize(0.3, white),
+    contrast8: transparentize(0.2, white),
+    contrast9: transparentize(0.1, white),
+    contrast10: white
+};
+const mono_colors = colors;
+export { mono_colors as default };

package/build/theme/mono/dark/dark.d.ts

@@ -0,0 +1,3 @@
+import type { ITheme } from '../../ThemeTypes';
+declare const dark: ITheme;
+export default dark;