mirror of
https://github.com/cpvalente/ontime.git
synced 2026-08-14 11:53:49 +00:00
V2 monorepo (#285)
* refactor(project structure): UI * refactor(project structure): extract utilities * refactor(project structure): remove unused * refactor(project structure): electron * refactor(project structure): server refactor: migrate to vitest refactor: monorepo config * refactor: extract application menu * refactor: exit process * refactor: extract tray menu * chore: electron build * Added Seconds in studio clock #282 --------- Co-authored-by: Fabian Posenau <fabian@fphome.de> --------- Co-authored-by: Fabian Posenau <fabian.p99@gmx.de> Co-authored-by: Fabian Posenau <fabian@fphome.de>
This commit is contained in:
Carlos Valente
GitHub
@@ -0,0 +1,132 @@
|
||||
@use "./ontimeColours" as *;
|
||||
|
||||
$transition-time-action: 0.1s;
|
||||
$transition-time-feedback: 0.3s;
|
||||
|
||||
//////////////////////////////////// general app colours
|
||||
|
||||
$bg-black-gradient: #202020;
|
||||
$bg-black: #121212;
|
||||
$bg-black-100: #070707;
|
||||
$bg-black-200: #1a1a1a; // container borders
|
||||
$bg-black-300: #1f1f1f; // container text
|
||||
$bg-gray-1100: #232323; // container borders
|
||||
$bg-gray-1050: #242424; // container borders
|
||||
$bg-gray-1000: #262626; // container borders
|
||||
$bg-gray-950: #292929;
|
||||
$bg-gray-900: #303030;
|
||||
$bg-gray-800: #404040;
|
||||
$bg-gray-700: #505050;
|
||||
$bg-gray-500: #666666;
|
||||
$bg-gray-100: #c0c0c0; // borders and whatnot
|
||||
|
||||
$bg-overlay: rgba(0, 0, 0, 0.85);
|
||||
|
||||
// $ontime-accent: #4bffab);
|
||||
$ontime-accent: #58A151;
|
||||
$ontime-accent-text: mix($bg-black, $ontime-accent, 10%);
|
||||
$ontime-pink: #ff7597;
|
||||
$ontime-pink-variant: #ff6969;
|
||||
$ontime-roll: #0274B6;
|
||||
$ontime-delay: #F57C13;
|
||||
$action-blue: #3182ce;
|
||||
$ontime-paused: #c05621;
|
||||
$opacity-disabled: 0.4;
|
||||
$ontime-red: #E4281E;
|
||||
|
||||
//rgba(255, 255, 255, 0.39); - $bg-gray-700
|
||||
//rgba(255, 255, 255, 0.13); - $bg-gray-900
|
||||
//rgba(255, 255, 255, 0.05); - $bg-gray-1000
|
||||
//rgba(255, 255, 255, 0.07) - $bg-gray-1000
|
||||
// text input bg -
|
||||
// was rgba(255, 255, 255, 0.03)
|
||||
// container level 1 - $bg-gray-1000
|
||||
// container level 2 - $bg-gray-1100
|
||||
// container level 2 border - rgba(0, 0, 0, 0.05)
|
||||
// indent in level 2 - $bg-black-300
|
||||
// outdent in level2 - $bg-gray-950
|
||||
//////////////////////////////////// editor
|
||||
|
||||
$notes-color: #f6f6f6;
|
||||
|
||||
$text-white: #fffffa;
|
||||
$text-gray-disabled: #505050;
|
||||
$label-gray: #aaa;
|
||||
$header-gray: $label-gray;
|
||||
$clocks: #ddd;
|
||||
$bg-gray: #f4f4f8;
|
||||
$text-delay: #F57C13;
|
||||
|
||||
$light-bg: #2b6cb0;
|
||||
$light-bg-transparent: #2b6cb055;
|
||||
$light-text: #2b6cb022;
|
||||
|
||||
$info-gray: #aaa;
|
||||
$info-gray-hover: #ddd;
|
||||
$warning-orange: #dd6b20;
|
||||
$error-red: #e53e3e;
|
||||
|
||||
//////////////////////////////////// viewers
|
||||
$title-white: #fffd;
|
||||
|
||||
//////////////////////////////////// block elements
|
||||
$bg-container-over: #0b1521;
|
||||
$bg-container-over-l1: #132337;
|
||||
$bg-container-l1: #202020;
|
||||
$bg-container-l2: #232323;
|
||||
$bg-container-l3: #2b2b2b;
|
||||
$border-l1: 1px solid $bg-gray-1000;
|
||||
$border-l3: 1px solid $bg-gray-900;
|
||||
|
||||
$block-delay-color: #E2720D;
|
||||
$delay-text: #d69e2e;
|
||||
$block-delay-border: #d69e2e55;
|
||||
$block-block-color: #7347AD;
|
||||
$block-border: 1px solid $bg-gray-1100;
|
||||
|
||||
//////////////////////////////////// utils
|
||||
|
||||
@mixin ellipsis {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
//////////////////////////////////// custom inputs
|
||||
$input-bg: rgba(255, 255, 255, 0.03);
|
||||
$input-hover-bg: rgba(255, 255, 255, 0.13);
|
||||
$input-bg-delayed: rgba(214, 158, 46, 0.07);
|
||||
$input-hover-bg-delayed: rgba(214, 158, 46, 0.17);
|
||||
$input-border: 1px solid transparent;
|
||||
$input-delayed-border: 1px solid $block-delay-border;
|
||||
|
||||
//////////////////////////////////// general app element overriders
|
||||
|
||||
// no decoration on lists
|
||||
ul {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
// no resizing on text areas
|
||||
textarea {
|
||||
resize: none !important;
|
||||
}
|
||||
|
||||
// Define style for a link
|
||||
a:hover {
|
||||
color: $ontime-pink;
|
||||
}
|
||||
|
||||
// horizontal separator
|
||||
.hSeparator {
|
||||
width: 100%;
|
||||
border-bottom: 1px solid $light-bg;
|
||||
margin: 1em auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// inline vertical separator
|
||||
.vSpan {
|
||||
margin: 0 0.5em;
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
@use "v2Styles" as *;
|
||||
|
||||
//////////////////////////////////// general app elements
|
||||
|
||||
@mixin main-container {
|
||||
background-color: $bg-container-l1;
|
||||
border: 1px solid $bg-container-l1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
@mixin second-container {
|
||||
background-color: $bg-container-l2;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
@mixin third-container {
|
||||
background-color: $bg-container-l3;
|
||||
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
@mixin action-link {
|
||||
color: $action-text-color;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
transition-property: color;
|
||||
transition-duration: $transition-time-action;
|
||||
|
||||
&:hover {
|
||||
color: $ontime-color;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,109 @@
|
||||
// from https://www.genomecolor.space/
|
||||
|
||||
$white-1: rgba(255, 255, 255, 0.01);
|
||||
$white-3: rgba(255, 255, 255, 0.03);
|
||||
$white-7: rgba(255, 255, 255, 0.07);
|
||||
$white-9: rgba(255, 255, 255, 0.09);
|
||||
$white-10: rgba(255, 255, 255, 0.10);
|
||||
$white-13: rgba(255, 255, 255, 0.13);
|
||||
|
||||
$gray-50: #f6f6f6;
|
||||
$gray-100: #ececec;
|
||||
$gray-200: #e2e2e2;
|
||||
$gray-300: #cfcfcf;
|
||||
$gray-400: #b1b1b1;
|
||||
$gray-500: #9d9d9d;
|
||||
$gray-600: #8a8a8a;
|
||||
$gray-700: #6c6c6c;
|
||||
$gray-800: #595959;
|
||||
$gray-900: #4c4c4c;
|
||||
$gray-1000: #404040;
|
||||
$gray-1050: #303030;
|
||||
$gray-1100: #2d2d2d;
|
||||
$gray-1250: #262626;
|
||||
$gray-1200: #202020;
|
||||
$gray-1300: #1a1a1a;
|
||||
$gray-1350: #101010;
|
||||
$pure-white: #fff;
|
||||
$ui-white: $gray-50;
|
||||
$ui-black: $gray-1350;
|
||||
|
||||
$orange-50: #FFFAF0;
|
||||
$orange-100: #FFF4DF;
|
||||
$orange-200: #FFEECE;
|
||||
$orange-300: #FFE1AB;
|
||||
$orange-400: #FFCC78;
|
||||
$orange-500: #FFBC56;
|
||||
$orange-600: #FFAB33;
|
||||
$orange-700: #E69000;
|
||||
$orange-800: #D27C00;
|
||||
$orange-900: #B46D00;
|
||||
$orange-1000: #975E00;
|
||||
$orange-1100: #6A4400;
|
||||
$orange-1200: #4C3200;
|
||||
$orange-1300: #3D2900;
|
||||
$orange-1350: #2E1F00;
|
||||
|
||||
$green-50: #EDFAEE;
|
||||
$green-100: #DCF4DE;
|
||||
$green-200: #CBEECF;
|
||||
$green-300: #A9E0B0;
|
||||
$green-400: #77C785;
|
||||
$green-500: #55B469;
|
||||
$green-600: #339E4E;
|
||||
$green-700: #087A27;
|
||||
$green-800: #006E1B;
|
||||
$green-900: #006415;
|
||||
$green-1000: #00570F;
|
||||
$green-1100: #004108;
|
||||
$green-1200: #003005;
|
||||
$green-1300: #002703;
|
||||
$green-1350: #001D02;
|
||||
|
||||
$blue-50: #F5F7FF;
|
||||
$blue-100: #E3EAFF;
|
||||
$blue-200: #D2DDFF;
|
||||
$blue-300: #AFC4FF;
|
||||
$blue-400: #779BE7;
|
||||
$blue-500: #578AF4;
|
||||
$blue-600: #3E75E8;
|
||||
$blue-700: #2B5ABC;
|
||||
$blue-800: #0A43B9;
|
||||
$blue-900: #0036A6;
|
||||
$blue-1000: #002A90;
|
||||
$blue-1100: #001A64;
|
||||
$blue-1200: #001145;
|
||||
$blue-1300: #000D36;
|
||||
$blue-1350: #000926;
|
||||
|
||||
$red-50: #FFF0F0;
|
||||
$red-100: #FFDFDF;
|
||||
$red-200: #FFCECE;
|
||||
$red-300: #FFABAB;
|
||||
$red-400: #FF7878;
|
||||
$red-500: #FA5656;
|
||||
$red-600: #ED3333;
|
||||
$red-700: #D20300;
|
||||
$red-800: #C10000;
|
||||
$red-900: #B20000;
|
||||
$red-1000: #9A0000;
|
||||
$red-1100: #6F0000;
|
||||
$red-1200: #520000;
|
||||
$red-1300: #440000;
|
||||
$red-1350: #360000;
|
||||
|
||||
$violet-50: #F6F6F6;
|
||||
$violet-100: #EBE5FF;
|
||||
$violet-200: #DFD5FF;
|
||||
$violet-300: #C7B8FD;
|
||||
$violet-400: #A790F5;
|
||||
$violet-500: #9379EC;
|
||||
$violet-600: #8064E1;
|
||||
$violet-700: #674ACB;
|
||||
$violet-800: #4E31B1;
|
||||
$violet-900: #3F249D;
|
||||
$violet-1000: #311887;
|
||||
$violet-1100: #1F0B62;
|
||||
$violet-1200: #140545;
|
||||
$violet-1300: #0F0336;
|
||||
$violet-1350: #0A0126;
|
||||
@@ -0,0 +1,51 @@
|
||||
@use "./ontimeColours" as *;
|
||||
|
||||
$transition-time-action: 0.1s;
|
||||
$transition-time-feedback: 0.3s;
|
||||
|
||||
$component-border-radius-md: 3px;
|
||||
$component-border-radius-sm: 2px;
|
||||
|
||||
// semantic colours
|
||||
$action-blue: #3182ce;
|
||||
$action-text-color: $blue-400;
|
||||
$ontime-color: #ff7597;
|
||||
$error-red: $red-500;
|
||||
$warning-orange: $orange-500;
|
||||
$opacity-disabled: 0.4;
|
||||
|
||||
// playback colours
|
||||
$playback-start: $green-600;
|
||||
$ontime-roll: #0274B6;
|
||||
$ontime-delay: #F57C13;
|
||||
$ontime-delay-text: #E69056;
|
||||
$ontime-paused: #c05621;
|
||||
$ontime-stop: #E4281E;
|
||||
$playback-negative: $red-500;
|
||||
$active-indicator: #899948;
|
||||
$text-black: $gray-1350;
|
||||
|
||||
// interface panels
|
||||
$bg-container-l1: $gray-1350;
|
||||
$bg-container-l2: $gray-1300;
|
||||
$bg-container-l3: $gray-1350;
|
||||
|
||||
$bg-container-onlight: $gray-100;
|
||||
|
||||
$box-shadow-l1: rgba(0, 0, 0, 0.15) 0 3px 3px 0;
|
||||
$box-shadow-l2: rgba(0, 0, 0, 0.15) 0 3px 3px 0;
|
||||
|
||||
// interface elements
|
||||
$border-color-ondark: $white-10;
|
||||
$element-inner-spacing: 4px;
|
||||
$element-spacing: 8px;
|
||||
$section-spacing: 16px;
|
||||
$main-spacing: 32px;
|
||||
|
||||
// interface text
|
||||
$ontime-font-family: "Open Sans", "Segoe UI", sans-serif;
|
||||
$label-gray: $gray-400;
|
||||
$secondary-text-gray: $gray-400;
|
||||
$section-white: $ui-white;
|
||||
$inner-section-text-size: 14px;
|
||||
$text-body-size: 15px;
|
||||
@@ -0,0 +1,3 @@
|
||||
.mirror {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
@use 'v2Styles' as *;
|
||||
@use 'viewerCommon' as *;
|
||||
@use "ontimeColours" as *;
|
||||
|
||||
// General
|
||||
$viewer-transition-time: 0.5s;
|
||||
|
||||
// Text
|
||||
$viewer-font-family: "Open Sans", "Segoe UI", sans-serif; // --font-family-override
|
||||
$viewer-opacity-disabled: 0.6;
|
||||
|
||||
// General styling
|
||||
$accent-color: $red-500; // --accent-color-override
|
||||
$delay-color: $ontime-delay-text;
|
||||
$viewer-label-color: rgba(white, 25%);
|
||||
|
||||
// Main Properties of a viewer
|
||||
$viewer-background-color: $ui-black; // --background-color-override
|
||||
$viewer-color: rgba(white, 80%); // --color-override
|
||||
$viewer-secondary-color: rgba(white, 45%); // --secondary-color-override
|
||||
$viewer-card-bg-color: rgba(white, 7%); // --card-background-color-override
|
||||
$viewer-overlay-bg-color: rgba(black, 90%);
|
||||
$element-border-radius: 8px;
|
||||
|
||||
// Properties related to timer
|
||||
$timer-color: rgba(white, 80%); // --timer-color-override
|
||||
$timer-finished-color: $playback-negative;
|
||||
$timer-bold-font-family: "Arial Black", sans-serif; // --card-background-color-override
|
||||
@@ -0,0 +1,53 @@
|
||||
const commonStyles = {
|
||||
letterSpacing: '0.3px',
|
||||
fontWeight: '400',
|
||||
borderRadius: '3px',
|
||||
};
|
||||
|
||||
export const ontimeButtonFilled = {
|
||||
...commonStyles,
|
||||
background: '#2B5ABC', // $blue-700
|
||||
color: '#fff', // pure-white
|
||||
border: '1px solid #2B5ABC', // $blue-700
|
||||
_hover: {
|
||||
backgroundColor: '#0A43B9', // $blue-800
|
||||
border: '1px solid #0A43B9', // $blue-800
|
||||
},
|
||||
_active: {
|
||||
backgroundColor: '#0036A6', // blue-900
|
||||
borderColor: '#002A90', // blue-1000
|
||||
},
|
||||
};
|
||||
|
||||
export const ontimeButtonOutlined = {
|
||||
...commonStyles,
|
||||
backgroundColor: '#2d2d2d', // $gray-1100
|
||||
color: '#e2e2e2', // $blue-400
|
||||
border: '1px solid rgba(255, 255, 255, 0.10)', // white-10
|
||||
_hover: {
|
||||
backgroundColor: '#404040', // $gray-1000
|
||||
},
|
||||
_active: {
|
||||
backgroundColor: '#2d2d2d', // $gray-1100
|
||||
borderColor: '#202020', // $gray-12000
|
||||
},
|
||||
};
|
||||
|
||||
export const ontimeButtonSubtle = {
|
||||
...commonStyles,
|
||||
backgroundColor: '#303030', // $gray-1050
|
||||
color: '#779BE7', // $blue-400
|
||||
border: '1px solid transparent',
|
||||
_hover: {
|
||||
background: '#404040', // $gray-1000
|
||||
},
|
||||
_active: {
|
||||
backgroundColor: '#2d2d2d', // $gray-1100
|
||||
borderColor: '#202020', // $gray-12000
|
||||
},
|
||||
};
|
||||
|
||||
export const ontimeButtonSubtleWhite = {
|
||||
...ontimeButtonSubtle,
|
||||
color: '#f6f6f6', // $gray-50
|
||||
};
|
||||
@@ -0,0 +1,21 @@
|
||||
export const ontimeCheckboxOnDark = {
|
||||
control: {
|
||||
border: '1px',
|
||||
borderColor: '#2d2d2d', // $gray-1100
|
||||
backgroundColor: '#2d2d2d', // $gray-1100
|
||||
_checked: {
|
||||
borderColor: '#3182ce', // $action-blue
|
||||
backgroundColor: '#3182ce', //$action-blue
|
||||
},
|
||||
_focus: {
|
||||
boxShadow: '0 0 0 1px #578AF4'
|
||||
}
|
||||
},
|
||||
label: {
|
||||
fontWeight: '200',
|
||||
color: '#9d9d9d', // $gray-500
|
||||
_checked: {
|
||||
color: '#cfcfcf', // $gray-300
|
||||
}
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,14 @@
|
||||
export const ontimeEditable = {
|
||||
input: {
|
||||
borderRadius: '3px',
|
||||
width: '100%',
|
||||
_focus: {
|
||||
border: '1px solid #578AF4', // $blue-500
|
||||
boxShadow: 'none',
|
||||
},
|
||||
},
|
||||
preview: {
|
||||
width: '100%',
|
||||
border: '1px solid transparent', // $blue-500
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,19 @@
|
||||
export const ontimeMenuOnDark = {
|
||||
list: {
|
||||
borderRadius: "3px",
|
||||
border: 'none',
|
||||
bg: '#fff', // $gray-50
|
||||
zIndex: 100,
|
||||
},
|
||||
item: {
|
||||
letterSpacing: '0.15px',
|
||||
color: '#101010', // $gray-1350
|
||||
bg: '#fff', //
|
||||
_hover: {
|
||||
backgroundColor: '#e2e2e2', // $gray-200
|
||||
},
|
||||
},
|
||||
divider: {
|
||||
borderColor: '#cfcfcf', // $gray-200
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,20 @@
|
||||
export const ontimeSelect = {
|
||||
field: {
|
||||
color: '#e2e2e2', // $gray-200
|
||||
borderRadius: '3px',
|
||||
fontWeight: '400',
|
||||
background: '#262626', // $gray-1100
|
||||
border: '1px solid transparent',
|
||||
_hover: {
|
||||
background: '#404040', // $gray-1000
|
||||
},
|
||||
_focus: {
|
||||
background: '#404040', // $gray-1000
|
||||
color: '#f6f6f6', // $gray-50
|
||||
border: '1px solid #578AF4', // $blue-500
|
||||
},
|
||||
},
|
||||
icon: {
|
||||
color: '#e2e2e2', // $gray-200
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,14 @@
|
||||
export const ontimeSwitch = {
|
||||
container: { },
|
||||
track: {
|
||||
background: '#2d2d2d', // $gray-1100
|
||||
border: '1px solid transparent',
|
||||
_checked: {
|
||||
background: `#2B5ABC`, // $blue-700
|
||||
},
|
||||
_focus: {
|
||||
border: '1px solid #578AF4', // $blue-500
|
||||
}
|
||||
},
|
||||
thumb: {},
|
||||
};
|
||||
@@ -0,0 +1,43 @@
|
||||
const commonStyles = {
|
||||
borderRadius: '3px',
|
||||
fontWeight: '400',
|
||||
backgroundColor: '#262626', // $gray-1250
|
||||
color: '#e2e2e2', // $gray-200
|
||||
border: '1px solid transparent',
|
||||
_hover: {
|
||||
backgroundColor: '#2d2d2d', // $gray-1100
|
||||
},
|
||||
_focus: {
|
||||
backgroundColor: '#2d2d2d', // $gray-1000
|
||||
color: '#f6f6f6', // $gray-50
|
||||
border: '1px solid #578AF4', // $blue-500
|
||||
},
|
||||
_placeholder: { color: '#9d9d9d' }, // $gray-500
|
||||
};
|
||||
|
||||
export const ontimeInputFilled = {
|
||||
field: {
|
||||
...commonStyles,
|
||||
},
|
||||
};
|
||||
|
||||
export const ontimeTextAreaFilled = {
|
||||
...commonStyles,
|
||||
};
|
||||
|
||||
export const ontimeTextAreaFilledOnLight = {
|
||||
borderRadius: '3px',
|
||||
fontWeight: '400',
|
||||
backgroundColor: '#ececec', // $gray-100
|
||||
color: '#202020', // $gray-1200
|
||||
border: '1px solid transparent',
|
||||
_hover: {
|
||||
backgroundColor: '#cfcfcf', // $gray-300
|
||||
},
|
||||
_focus: {
|
||||
backgroundColor: '#cfcfcf', // $gray-300
|
||||
color: '#101010',
|
||||
border: '1px solid #578AF4', // $blue-500
|
||||
},
|
||||
_placeholder: { color: '#9d9d9d' }, // $gray-500
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
export const ontimeTooltip = {
|
||||
_light: {
|
||||
backgroundColor: '#2d2d2d', // $gray-1100
|
||||
color: '#ececec', // $gray-100
|
||||
padding: '2px 8px',
|
||||
},
|
||||
_dark: {
|
||||
backgroundColor: '#2d2d2d', // $gray-1100
|
||||
color: '#ececec', // $gray-100
|
||||
padding: '2px 8px',
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,83 @@
|
||||
import { extendTheme } from '@chakra-ui/react';
|
||||
|
||||
import {
|
||||
ontimeButtonFilled,
|
||||
ontimeButtonOutlined,
|
||||
ontimeButtonSubtle,
|
||||
ontimeButtonSubtleWhite,
|
||||
} from './ontimeButton';
|
||||
import { ontimeCheckboxOnDark } from './ontimeCheckbox';
|
||||
import { ontimeEditable } from './ontimeEditable';
|
||||
import { ontimeMenuOnDark } from './ontimeMenu';
|
||||
import { ontimeSelect } from './ontimeSelect';
|
||||
import { ontimeSwitch } from './ontimeSwitch';
|
||||
import {
|
||||
ontimeInputFilled,
|
||||
ontimeTextAreaFilled,
|
||||
ontimeTextAreaFilledOnLight,
|
||||
} from './ontimeTextInputs';
|
||||
import { ontimeTooltip } from './ontimeTooltip';
|
||||
|
||||
const theme = extendTheme({
|
||||
components: {
|
||||
Button: {
|
||||
baseStyle: {
|
||||
borderRadius: '3px',
|
||||
},
|
||||
variants: {
|
||||
'ontime-filled': { ...ontimeButtonFilled },
|
||||
'ontime-outlined': { ...ontimeButtonOutlined },
|
||||
'ontime-subtle': { ...ontimeButtonSubtle },
|
||||
'ontime-subtle-white': { ...ontimeButtonSubtleWhite },
|
||||
},
|
||||
},
|
||||
Checkbox: {
|
||||
variants: {
|
||||
'ontime-ondark': { ...ontimeCheckboxOnDark },
|
||||
},
|
||||
},
|
||||
Editable: {
|
||||
variants: {
|
||||
'ontime': { ...ontimeEditable },
|
||||
},
|
||||
},
|
||||
Input: {
|
||||
baseStyle: {
|
||||
borderRadius: '3px',
|
||||
border: '1px',
|
||||
},
|
||||
variants: {
|
||||
'ontime-filled': { ...ontimeInputFilled },
|
||||
},
|
||||
},
|
||||
Textarea: {
|
||||
baseStyle: {
|
||||
borderRadius: '3px',
|
||||
},
|
||||
variants: {
|
||||
'ontime-filled': { ...ontimeTextAreaFilled },
|
||||
'ontime-filled-onlight': { ...ontimeTextAreaFilledOnLight },
|
||||
},
|
||||
},
|
||||
Tooltip: {
|
||||
baseStyle: { ...ontimeTooltip},
|
||||
},
|
||||
Switch: {
|
||||
variants: {
|
||||
'ontime': { ...ontimeSwitch },
|
||||
},
|
||||
},
|
||||
Select: {
|
||||
variants: {
|
||||
'ontime': { ...ontimeSelect },
|
||||
},
|
||||
},
|
||||
Menu: {
|
||||
variants: {
|
||||
'ontime-on-dark': { ...ontimeMenuOnDark },
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export default theme;
|
||||
Reference in New Issue
Block a user