+
diff --git a/src/components/v-list/v-list-item.vue b/src/components/v-list/v-list-item.vue
index e3a5555999..32e48fc3f5 100644
--- a/src/components/v-list/v-list-item.vue
+++ b/src/components/v-list/v-list-item.vue
@@ -71,17 +71,16 @@ export default defineComponent({
--v-list-item-max-height: auto;
--v-list-item-border-radius: 0;
--v-list-item-margin-bottom: 0;
- --v-list-item-color: var(--v-list-color, var(--foreground-color));
- --v-list-item-color-hover: var(--v-list-color-hover, var(--foreground-color));
- --v-list-item-color-active: var(--v-list-color-active, var(--foreground-color));
- --v-list-item-background-color: var(--v-list-background-color, var(--background-color));
+ --v-list-item-color: var(--v-list-color, var(--foreground-normal));
+ --v-list-item-color-hover: var(--v-list-color-hover, var(--foreground-normal));
+ --v-list-item-color-active: var(--v-list-color-active, var(--foreground-normal));
--v-list-item-background-color-hover: var(
--v-list-background-color-hover,
- var(--background-color-hover)
+ var(--background-normal-alt)
);
--v-list-item-background-color-active: var(
--v-list-background-color-active,
- var(--background-color-active)
+ var(--background-normal-alt)
);
position: relative;
@@ -99,7 +98,6 @@ export default defineComponent({
overflow: hidden;
color: var(--v-list-item-color);
text-decoration: none;
- background-color: var(--v-list-item-background-color);
border-radius: var(--v-list-item-border-radius);
&.link {
@@ -121,7 +119,7 @@ export default defineComponent({
}
&.disabled {
- --v-list-item-color: var(--foreground-color-secondary);
+ --v-list-item-color: var(--foreground-subdued);
}
@at-root {
diff --git a/src/components/v-list/v-list.vue b/src/components/v-list/v-list.vue
index 0101993141..26c2a720dd 100644
--- a/src/components/v-list/v-list.vue
+++ b/src/components/v-list/v-list.vue
@@ -57,12 +57,11 @@ export default defineComponent({
--v-list-max-width: none;
--v-list-min-width: none;
--v-list-min-height: none;
- --v-list-color: var(--foreground-color);
- --v-list-color-hover: var(--foreground-color);
- --v-list-color-active: var(--foreground-color);
- --v-list-background-color: var(--background-color);
- --v-list-background-color-hover: var(--background-color-hover);
- --v-list-background-color-active: var(--background-color-active);
+ --v-list-color: var(--foreground-normal);
+ --v-list-color-hover: var(--foreground-normal);
+ --v-list-color-active: var(--foreground-normal);
+ --v-list-background-color-hover: var(--background-normal-alt);
+ --v-list-background-color-active: var(--background-normal-alt);
position: static;
display: block;
@@ -73,8 +72,7 @@ export default defineComponent({
padding: var(--v-list-padding);
overflow: auto;
color: var(--v-list-color);
- background-color: var(--v-list-background-color);
- border-radius: var(--input-border-radius);
+ border-radius: var(--border-radius);
&.nav {
--v-list-padding: 8px;
diff --git a/src/components/v-menu/v-menu.vue b/src/components/v-menu/v-menu.vue
index def3b563be..36b683c420 100644
--- a/src/components/v-menu/v-menu.vue
+++ b/src/components/v-menu/v-menu.vue
@@ -169,7 +169,7 @@ export default defineComponent({
.arrow {
&::before {
- background: var(--input-border-color);
+ background: var(--border-normal);
transform: rotate(45deg) scale(0);
transition: transform var(--fast) var(--transition-out);
transition-delay: 0;
@@ -202,9 +202,9 @@ export default defineComponent({
max-height: 50vh;
overflow-x: hidden;
overflow-y: auto;
- background-color: var(--highlight);
- border: 2px solid var(--input-border-color);
- border-radius: var(--input-border-radius);
+ background-color: var(--background-subdued);
+ border: 2px solid var(--border-normal);
+ border-radius: var(--border-radius);
box-shadow: 0px 4px 12px rgba(38, 50, 56, 0.1);
opacity: 0;
transition-timing-function: var(--transition-out);
diff --git a/src/components/v-modal/v-modal.vue b/src/components/v-modal/v-modal.vue
index 5a0335325f..ba1012c066 100644
--- a/src/components/v-modal/v-modal.vue
+++ b/src/components/v-modal/v-modal.vue
@@ -82,7 +82,7 @@ export default defineComponent({
max-width: 916px;
height: calc(100% - 16px);
max-height: 760px;
- background-color: var(--background-color);
+ background-color: var(--background-page);
border-radius: 4px;
.spacer {
@@ -95,7 +95,7 @@ export default defineComponent({
align-items: center;
height: 60px;
padding: 0 16px;
- border-bottom: 2px solid var(--background-color-alt);
+ border-bottom: 2px solid var(--background-normal);
.title {
margin-right: 12px;
@@ -103,7 +103,7 @@ export default defineComponent({
}
.subtitle {
- color: var(--foreground-color-secondary);
+ color: var(--foreground-subdued);
}
.menu-toggle {
@@ -133,7 +133,7 @@ export default defineComponent({
flex-shrink: 0;
width: 220px;
height: 100%;
- background-color: var(--background-color-alt);
+ background-color: var(--background-normal);
transform: translateX(-100%);
transition: transform var(--slow) var(--transition-out);
@@ -174,7 +174,7 @@ export default defineComponent({
justify-content: flex-end;
height: 60px;
padding: 0 16px;
- border-top: 2px solid var(--background-color-alt);
+ border-top: 2px solid var(--background-normal);
::v-deep > *:not(:last-child) {
margin-right: 8px;
diff --git a/src/components/v-notice/readme.md b/src/components/v-notice/readme.md
index 657a148ec5..c2c729f520 100644
--- a/src/components/v-notice/readme.md
+++ b/src/components/v-notice/readme.md
@@ -23,6 +23,6 @@ n/a
## CSS Variables
| Variable | Default |
|-------------------------------|----------------------------|
-| `--v-notice-color` | `var(--foreground-color);` |
-| `--v-notice-background-color` | `var(--action-light);` |
-| `--v-notice-icon-color` | `var(--action);` |
+| `--v-notice-color` | `var(--foreground-normal);` |
+| `--v-notice-background-color` | `var(--primary-alt);` |
+| `--v-notice-icon-color` | `var(--primary);` |
diff --git a/src/components/v-notice/v-notice.vue b/src/components/v-notice/v-notice.vue
index 2c72d1e0d5..e6de0b2b78 100644
--- a/src/components/v-notice/v-notice.vue
+++ b/src/components/v-notice/v-notice.vue
@@ -63,9 +63,9 @@ export default defineComponent({
diff --git a/src/components/v-overlay/v-overlay.vue b/src/components/v-overlay/v-overlay.vue
index b752019845..9a308fc419 100644
--- a/src/components/v-overlay/v-overlay.vue
+++ b/src/components/v-overlay/v-overlay.vue
@@ -33,7 +33,7 @@ export default defineComponent({
```
@@ -37,7 +37,7 @@ n/a
## CSS Variables
| Variable | Default |
|------------------------------|-------------------------------------|
-| `--v-sheet-background-color` | `var(--input-background-color-alt)` |
+| `--v-sheet-background-color` | `var(--background-page-alt)` |
| `--v-sheet-height` | `auto` |
| `--v-sheet-min-height` | `var(--input-height)` |
| `--v-sheet-max-height` | `none` |
diff --git a/src/components/v-sheet/v-sheet.vue b/src/components/v-sheet/v-sheet.vue
index f98a308d87..569ca88f00 100644
--- a/src/components/v-sheet/v-sheet.vue
+++ b/src/components/v-sheet/v-sheet.vue
@@ -17,7 +17,7 @@ export default defineComponent({
diff --git a/src/components/v-slider/v-slider.vue b/src/components/v-slider/v-slider.vue
index ef9081ee99..566d46e47d 100644
--- a/src/components/v-slider/v-slider.vue
+++ b/src/components/v-slider/v-slider.vue
@@ -19,7 +19,7 @@
-
+
{{ value }}
@@ -87,12 +87,10 @@ export default defineComponent({
```
@@ -67,4 +67,4 @@ Keep in mind to pass the `value` prop with a unique value when using arrays in `
## CSS Variables
| Variable | Default |
|--------------------|---------------------------------|
-| `--v-switch-color` | `var(--input-foreground-color)` |
+| `--v-switch-color` | `var(--foreground-normal)` |
diff --git a/src/components/v-switch/v-switch.test.ts b/src/components/v-switch/v-switch.test.ts
index 5d704654cb..05200a2b15 100644
--- a/src/components/v-switch/v-switch.test.ts
+++ b/src/components/v-switch/v-switch.test.ts
@@ -15,7 +15,7 @@ describe('Switch', () => {
},
});
- expect(component.find('span[class="label"]').text()).toContain('Turn me on');
+ expect(component.find('span[class="label type-label"]').text()).toContain('Turn me on');
});
it('Renders as checked when inputValue `true` is given', () => {
diff --git a/src/components/v-switch/v-switch.vue b/src/components/v-switch/v-switch.vue
index d09777ce79..ed5ea40ad0 100644
--- a/src/components/v-switch/v-switch.vue
+++ b/src/components/v-switch/v-switch.vue
@@ -8,7 +8,7 @@
:disabled="disabled"
>
-
+
{{ label }}
@@ -71,10 +71,8 @@ export default defineComponent({
diff --git a/src/modules/settings/routes/data-model/fields/components/field-select/field-select.vue b/src/modules/settings/routes/data-model/fields/components/field-select/field-select.vue
index fa86bc56b9..bdb07a6485 100644
--- a/src/modules/settings/routes/data-model/fields/components/field-select/field-select.vue
+++ b/src/modules/settings/routes/data-model/fields/components/field-select/field-select.vue
@@ -229,6 +229,6 @@ export default defineComponent({
}
.v-input.hidden {
- --input-background-color: var(--background-color-alt);
+ --background-page: var(--background-normal);
}
diff --git a/src/modules/settings/routes/data-model/fields/components/fields-management/fields-management.vue b/src/modules/settings/routes/data-model/fields/components/fields-management/fields-management.vue
index 3b690fda9c..a51546210f 100644
--- a/src/modules/settings/routes/data-model/fields/components/fields-management/fields-management.vue
+++ b/src/modules/settings/routes/data-model/fields/components/fields-management/fields-management.vue
@@ -22,6 +22,7 @@
dashed
outlined
full-width
+ large
@click="openFieldSetup()"
>
@@ -241,7 +242,7 @@ export default defineComponent({
diff --git a/src/routes/login/login.vue b/src/routes/login/login.vue
index 93fb24b3d1..5b07262dbc 100644
--- a/src/routes/login/login.vue
+++ b/src/routes/login/login.vue
@@ -1,6 +1,6 @@
- {{ $t('sign_in') }}
+ {{ $t('sign_in') }}
- {{ $t('choose_project') }}
+ {{ $t('choose_project') }}
{{ (project.api && project.api.project_name) || project.key }}
diff --git a/src/styles/_base.scss b/src/styles/_base.scss
index b6fd69369e..17b090317b 100644
--- a/src/styles/_base.scss
+++ b/src/styles/_base.scss
@@ -16,10 +16,11 @@ html {
body {
color: var(--page-text-color);
- font-weight: 400;
+ font-weight: 500;
+ font-size: 14px;
font-family: var(--family-sans-serif);
- line-height: 1.3;
- letter-spacing: 0.01em;
+ font-style: normal;
+ line-height: 22px;
background-color: var(--page-background-color);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss
index 0c7cebb4d4..6df77dfa91 100644
--- a/src/styles/_fonts.scss
+++ b/src/styles/_fonts.scss
@@ -1,46 +1,57 @@
-@font-face {
- font-weight: 300;
- font-family: 'Roboto';
- font-style: normal;
- src:
- url('../assets/fonts/roboto-light.woff2') format('woff2'),
- url('../assets/fonts/roboto-light.woff') format('woff');
- font-display: block;
-}
+// Sans Serif
@font-face {
font-weight: 400;
- font-family: 'Roboto';
+ font-family: 'Inter';
font-style: normal;
src:
- url('../assets/fonts/roboto-regular.woff2') format('woff2'),
- url('../assets/fonts/roboto-regular.woff') format('woff');
+ url('../assets/fonts/Inter-Regular.woff2') format('woff2'),
+ url('../assets/fonts/Inter-Regular.woff') format('woff');
font-display: block;
}
@font-face {
font-weight: 500;
- font-family: 'Roboto';
+ font-family: 'Inter';
font-style: normal;
src:
- url('../assets/fonts/roboto-medium.woff2') format('woff2'),
- url('../assets/fonts/roboto-medium.woff') format('woff');
+ url('../assets/fonts/Inter-Medium.woff2') format('woff2'),
+ url('../assets/fonts/Inter-Medium.woff') format('woff');
font-display: block;
}
-// Roboto Mono
+@font-face {
+ font-weight: 500;
+ font-family: 'Inter';
+ font-style: italic;
+ src:
+ url('../assets/fonts/Inter-MediumItalic.woff2') format('woff2'),
+ url('../assets/fonts/Inter-MediumItalic.woff') format('woff');
+ font-display: block;
+}
+
+@font-face {
+ font-weight: 600;
+ font-family: 'Inter';
+ font-style: normal;
+ src:
+ url('../assets/fonts/Inter-SemiBold.woff2') format('woff2'),
+ url('../assets/fonts/Inter-SemiBold.woff') format('woff');
+ font-display: block;
+}
+
+// Monospace
@font-face {
font-weight: 400;
- font-family: 'Roboto Mono';
+ font-family: 'Fira Code';
font-style: normal;
src:
- url('../assets/fonts/robotomono-regular.woff2') format('woff2'),
- url('../assets/fonts/robotomono-regular.woff') format('woff');
- font-display: block;
+ url('../assets/fonts/FiraCode-Regular.woff2') format('woff2'),
+ url('../assets/fonts/FiraCode-Regular.woff') format('woff');
}
-// Merriweather
+// Serif
@font-face {
font-weight: 400;
diff --git a/src/styles/_tooltip.scss b/src/styles/_tooltip.scss
index 88d4ff9be3..1ad60b9190 100644
--- a/src/styles/_tooltip.scss
+++ b/src/styles/_tooltip.scss
@@ -7,14 +7,14 @@
display: none;
max-width: 260px;
padding: 4px 8px;
- color: var(--tooltip-foreground-color);
- background-color: var(--tooltip-background-color);
+ color: var(--foreground-inverted);
+ background-color: var(--background-inverted);
border-radius: 4px;
transition: opacity 200ms;
&.inverted {
- --tooltip-foreground-color: var(--tooltip-foreground-color-inverted);
- --tooltip-background-color: var(--tooltip-background-color-inverted);
+ --tooltip-foreground-color: var(--foreground-normal);
+ --tooltip-background-color: var(--background-subdued);
}
&.visible {
diff --git a/src/styles/_type-styles.scss b/src/styles/_type-styles.scss
index 423cf6c840..afff69bc83 100644
--- a/src/styles/_type-styles.scss
+++ b/src/styles/_type-styles.scss
@@ -1,43 +1,30 @@
-@import 'mixins/type-styles';
-
:root {
- --family-monospace: 'Roboto Mono', monospace;
+ --family-monospace: 'Fira Code', monospace;
--family-serif: 'Merriweather', serif;
- --family-sans-serif: 'Roboto', sans-serif;
+ --family-sans-serif: 'Inter', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
}
.type-title {
- @include type-title;
-}
-
-.type-heading-large {
- @include type-heading-large;
-}
-
-.type-heading-medium {
- @include type-heading-medium;
-}
-
-.type-heading-small {
- @include type-heading-small;
+ font-weight: normal;
+ font-size: 24px;
+ font-family: var(--family-sans-serif);
+ font-style: normal;
+ line-height: 29px;
}
.type-label {
- @include type-label;
+ font-weight: 600;
+ font-size: 16px;
+ font-family: var(--family-sans-serif);
+ font-style: normal;
+ line-height: 19px;
+ letter-spacing: -0.32px;
}
-.type-note {
- @include type-note;
-}
-
-.type-table-head {
- @include type-table-head;
-}
-
-.type-body-serif {
- @include type-body-serif;
-}
-
-.type-body-sans {
- @include type-body-sans;
+.type-text {
+ font-weight: 500;
+ font-size: 14px;
+ font-family: var(--family-sans-serif);
+ font-style: normal;
+ line-height: 22px;
}
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index 9da3cb874b..eeb9973ed5 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -6,4 +6,8 @@
--medium: 200ms;
--slow: 300ms;
--content-padding: 12px;
+ --border-width: 2px;
+ --border-radius: 6px;
+ --input-height: 52px;
+ --input-padding: 12px;
}
diff --git a/src/styles/lib/_codemirror.scss b/src/styles/lib/_codemirror.scss
index 378a71e58d..e729cdc1d5 100644
--- a/src/styles/lib/_codemirror.scss
+++ b/src/styles/lib/_codemirror.scss
@@ -6,14 +6,14 @@
font-weight: inherit;
font-family: var(--family-monospace);
line-height: 18px;
- background-color: var(--input-background-color);
- border: var(--input-border-width) solid var(--input-border-color);
+ background-color: var(--background-page);
+ border: var(--border-width) solid var(--border-normal);
border-radius: var(--border-radius);
transition: all var(--fast) var(--transition);
}
.CodeMirror:hover {
- border-color: var(--input-border-color-hover);
+ border-color: var(--border-normal);
transition: none;
}
@@ -25,11 +25,11 @@
.CodeMirror-line::selection,
.CodeMirror-line > span::selection,
.CodeMirror-line > span > span::selection {
- background: var(--highlight);
+ background: var(--background-subdued);
}
.CodeMirror.CodeMirror-focused {
- border-color: var(--input-border-color-focus);
+ border-color: var(--primary);
}
.cm-matchhighlight {
@@ -42,7 +42,7 @@
}
.CodeMirror-activeline-background {
- background: var(--input-background-color-alt);
+ background: var(--background-page-alt);
}
.CodeMirror pre {
@@ -50,8 +50,8 @@
}
.CodeMirror-gutters {
- background-color: var(--input-background-color-alt);
- border-right: 2px solid var(--input-border-color);
+ background-color: var(--background-page-alt);
+ border-right: 2px solid var(--border-normal);
}
.CodeMirror-linenumber {
@@ -87,7 +87,7 @@
}
.cm-s-default .cm-atom {
- color: var(--accent);
+ color: var(--primary);
}
.cm-s-default .cm-attribute {
@@ -100,7 +100,7 @@
.CodeMirror .CodeMirror-matchingbracket {
color: inherit;
- border-bottom: 1px solid var(--accent);
+ border-bottom: 1px solid var(--primary);
}
.CodeMirror .CodeMirror-nonmatchingbracket {
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 289ccd1e1a..0129798802 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -1,9 +1,9 @@
@import 'base';
@import 'colors';
@import 'fonts';
-@import 'type-styles';
@import 'variables';
@import 'tooltip';
+@import 'type-styles';
@import 'themes/default';
@import 'themes/dark-mode';
@import 'lib/codemirror';
diff --git a/src/styles/mixins/type-styles.scss b/src/styles/mixins/type-styles.scss
deleted file mode 100644
index 524708e954..0000000000
--- a/src/styles/mixins/type-styles.scss
+++ /dev/null
@@ -1,101 +0,0 @@
-@mixin type-title {
- color: var(--heading-text-color);
- font-size: 22px;
-}
-
-@mixin type-heading-large {
- color: var(--heading-text-color);
- font-weight: 300;
- font-size: 48px;
- line-height: 52px;
- letter-spacing: -1px;
-}
-
-@mixin type-heading-medium {
- color: var(--heading-text-color);
- font-weight: 300;
- font-size: 28px;
-}
-
-@mixin type-heading-small {
- color: var(--heading-text-color);
- font-size: 18px;
-}
-
-@mixin type-item-title {
- color: var(--heading-text-color);
- font-weight: 400;
- font-size: 15px;
- line-height: 1.2;
-}
-
-@mixin type-item-title-dense {
- color: var(--heading-text-color);
- font-weight: 500;
- font-size: 13px;
- line-height: 1.1;
-}
-
-@mixin type-item-subtitle {
- color: var(--subheading-text-color);
- font-weight: 400;
- font-size: 14px;
- line-height: 1.2;
-}
-
-@mixin type-item-subtitle-dense {
- color: var(--subheading-text-color);
- font-weight: 500;
- font-size: 13px;
- line-height: 1.1;
-}
-
-@mixin type-label {
- color: var(--heading-text-color);
- font-size: 18px;
-}
-
-@mixin type-note {
- color: var(--note-text-color);
- font-size: 14px;
- font-style: italic;
-}
-
-@mixin type-table-head {
- font-weight: 500;
-}
-
-@mixin type-body-serif {
- font-size: 16px;
- font-family: var(--family-serif);
- line-height: 32px;
-}
-
-@mixin type-body-sans {
- font-size: 14px;
- font-family: var(--family-sans-serif);
- line-height: 26px;
-}
-
-@mixin type-card-title {
- color: var(--heading-text-color);
- font-weight: 500;
- font-size: 1.25rem;
- line-height: 2rem;
- letter-spacing: 0.0125em;
-}
-
-@mixin type-card-subtitle {
- color: var(--foreground-color-secondary);
- font-weight: 400;
- font-size: 0.875rem;
- line-height: 1.375rem;
- letter-spacing: 0.007em;
-}
-
-@mixin type-card-text {
- font-weight: 400;
- font-size: 0.875rem;
- line-height: 1.375rem;
- letter-spacing: 0.007em;
-}
diff --git a/src/styles/themes/_dark-mode.scss b/src/styles/themes/_dark-mode.scss
index 481aa710f8..cb12325f50 100644
--- a/src/styles/themes/_dark-mode.scss
+++ b/src/styles/themes/_dark-mode.scss
@@ -1,6 +1,6 @@
// Dark Mode
@mixin dark-mode {
- --background-color: var(--black);
+ --background-page: var(--black);
}
@media (prefers-color-scheme: dark) {
diff --git a/src/styles/themes/_default.scss b/src/styles/themes/_default.scss
index bd4c540d42..ac9b9e88fe 100644
--- a/src/styles/themes/_default.scss
+++ b/src/styles/themes/_default.scss
@@ -1,89 +1,83 @@
-/* stylelint-disable custom-property-empty-line-before, declaration-colon-space-after */
+/* stylelint-disable */
body,
.default-colors {
- /* Global */
- --brand: var(--blue-grey-900);
- --accent: var(--blue-500);
- --accent-light: var(--blue-50);
- --accent-dark: var(--light-blue-800);
- --action: var(--blue-grey-800);
- --action-light: var(--blue-grey-50);
- --action-dark: var(--light-blue-900);
- --success: var(--green);
- --success-light: var(--green-50);
- --success-dark: var(--green-800);
- --danger: var(--red);
- --danger-light: var(--red-50);
- --danger-dark: var(--red-800);
- --warning: var(--orange);
- --warning-dark: var(--orange-800);
- --warning-light: var(--orange-50);
- --foreground-color: var(--blue-grey-800);
- --foreground-color-secondary: var(--blue-grey-300);
- --foreground-color-tertiary: var(--blue-grey-100);
- --background-color: var(--white);
- --background-color-hover: var(--blue-grey-25);
- --background-color-active: var(--blue-grey-50);
- --background-color-alt: var(--blue-grey-50);
- --highlight: var(--off-white);
- --heading-text-color: var(--foreground-color);
- --subheading-text-color: var(--foreground-color-secondary);
+ --brand: var(--primary); // will be overriden with directus_settings.project_color
- /* Inputs */
- --input-foreground-color: var(--blue-grey-800);
- --input-foreground-color-hover: var(--blue-grey-800);
- --input-foreground-color-focus: var(--blue-grey-800);
- --input-foreground-color-empty: var(--blue-grey-300);
- --input-foreground-color-disabled: var(--blue-grey-200);
- --input-background-color: var(--white);
- --input-background-color-hover: var(--white);
- --input-background-color-focus: var(--white);
- --input-background-color-empty: var(--white);
- --input-background-color-disabled: var(--blue-grey-50);
- --input-border-width: 2px;
- --input-border-radius: 4px;
- --input-border-color: var(--blue-grey-100);
- --input-border-color-hover: var(--blue-grey-300);
- --input-border-color-focus: var(--blue-grey-600);
- --input-border-color-disabled: var(--blue-grey-100);
- --input-padding: 12px;
- --input-height: 52px;
- --input-action-color: var(--blue-grey-300);
- --input-action-color-hover: var(--blue-grey-600);
- --input-action-color-disabled: var(--blue-grey-200);
+ --border-normal: #D6DFE2;
+ --border-normal-alt: #BDCCD2;
+ --border-subdued: #ECEFF1;
- /* Buttons */
- --button-border-width: var(--input-border-width);
- --button-border-radius: var(--input-border-radius);
- --button-primary-background-color: var(--blue-grey-900);
- --button-primary-background-color-hover: var(--blue-grey-800);
- --button-primary-background-color-disabled: var(--blue-grey-400);
- --button-primary-background-color-activated: var(--off-black);
- --button-primary-foreground-color: var(--white);
- --button-primary-foreground-color-hover: var(--white);
- --button-primary-foreground-color-disabled: var(--blue-grey-300);
- --button-primary-foreground-color-activated: var(--white);
- --button-secondary-background-color: var(--blue-grey-100);
- --button-secondary-background-color-hover: var(--blue-grey-200);
- --button-secondary-background-color-disabled: var(--blue-grey-50);
- --button-secondary-foreground-color: var(--white);
- --button-secondary-foreground-color-hover: var(--blue-grey-600);
- --button-secondary-foreground-color-disabled: var(--blue-grey-400);
+ --foreground-normal: #263238;
+ --foreground-subdued: #B0BEC5;
+ --foreground-inverted:#FFF;
- /* Misc.
- Please try to use one of the variables above if applicable.
- Only add variables here if there's no other option
- */
- --overlay-color: rgba(38, 50, 56, 0.75);
- --divider-color: var(--blue-grey-50);
- --tooltip-foreground-color: var(--button-primary-foreground-color);
- --tooltip-background-color: var(--button-primary-background-color-hover);
- --tooltip-foreground-color-inverted: var(--input-foreground-color);
- --tooltip-background-color-inverted: var(--button-secondary-background-color);
+ --background-normal: #ECEFF1;
+ --background-normal-alt: #DDE3E6;
+ --background-subdued: #F5F7F8;
+ --background-page: #FFF;
+ --background-inverted: #263238;
+
+ --module-background: #13181A;
+ --module-background-alt: #090C0D;
+ --module-icon: #607D8B;
+ --module-icon-alt: #FFF;
+
+ --primary-10: #EAF2FD;
+ --primary-25: #CBDFFB;
+ --primary-50: #97BFF6;
+ --primary-75: #63A0F1;
+ --primary: #2F80ED;
+ --primary-alt: #E9F4FE;
+ --primary-125: #2D6CC0;
+ --primary-150: #2A5992;
+ --primary-175: #284565;
+ --primary-190: #273A4A;
+
+ --secondary-10: #F5EEFC;
+ --secondary-25: #E6D3F7;
+ --secondary-50: #CCA7EF;
+ --secondary-75: #B47DE8;
+ --secondary: #9B51E0;
+ --secondary-alt: #F5EEFC;
+ --secondary-125: #7E49B6;
+ --secondary-150: #60418C;
+ --secondary-175: #433A62;
+ --secondary-190: #323549;
+
+ --success-10: #E9F7EF;
+ --success-25: #C9EBD7;
+ --success-50: #93D7AF;
+ --success-75: #5DC288;
+ --success: #27AE60;
+ --success-alt: #EAF7F0;
+ --success-125: #278F56;
+ --success-150: #26704C;
+ --success-175: #265142;
+ --success-190: #263E3C;
+
+ --warning-10: #FEF5ED;
+ --warning-25: #FCE5D2;
+ --warning-50: #F8CCA4;
+ --warning-75: #F5B377;
+ --warning: #F2994A;
+ --warning-alt: #FEF5ED;
+ --warning-125: #BF7F46;
+ --warning-150: #8C6541;
+ --warning-175: #594C3D;
+ --warning-190: #3A3C3A;
+
+ --danger-10: #FDEEEE;
+ --danger-25: #FAD5D5;
+ --danger-50: #F5ABAB;
+ --danger-75: #F08181;
+ --danger: #EB5757;
+ --danger-alt: #FDEFEF;
+ --danger-125: #BA4E4F;
+ --danger-150: #884448;
+ --danger-175: #573B40;
+ --danger-190: #3A363B;
}
.alt-colors {
- --background-color: var(--background-color-alt);
- --background-color-hover: #dde3e6;
- --background-color-active: var(--blue-grey-100);
+ --background-subdued: var(--background-page);
}
diff --git a/src/views/private/components/drawer-button/drawer-button.vue b/src/views/private/components/drawer-button/drawer-button.vue
index cc21ce0c8b..c611c359b9 100644
--- a/src/views/private/components/drawer-button/drawer-button.vue
+++ b/src/views/private/components/drawer-button/drawer-button.vue
@@ -40,11 +40,11 @@ export default defineComponent({
position: relative;
width: 100%;
height: 64px;
- color: var(--foreground-color);
+ color: var(--foreground-normal);
transition: background-color var(--fast) var(--transition);
&:hover {
- background-color: var(--background-color-hover);
+ background-color: var(--background-normal-alt);
}
.icon {
diff --git a/src/views/private/components/drawer-detail/drawer-detail.vue b/src/views/private/components/drawer-detail/drawer-detail.vue
index adccc6f6cd..585c33387d 100644
--- a/src/views/private/components/drawer-detail/drawer-detail.vue
+++ b/src/views/private/components/drawer-detail/drawer-detail.vue
@@ -47,15 +47,15 @@ export default defineComponent({
position: relative;
width: 100%;
height: 64px;
- color: var(--foreground-color);
+ color: var(--foreground-normal);
transition: background-color var(--fast) var(--transition);
&:not(.open):hover {
- background-color: var(--background-color-hover);
+ background-color: var(--background-normal-alt);
}
&.open {
- background-color: var(--background-color-active);
+ background-color: var(--background-normal-alt);
}
}
diff --git a/src/views/private/components/header-bar-actions/header-bar-actions.vue b/src/views/private/components/header-bar-actions/header-bar-actions.vue
index 30fba2e4a8..ad7a15d20c 100644
--- a/src/views/private/components/header-bar-actions/header-bar-actions.vue
+++ b/src/views/private/components/header-bar-actions/header-bar-actions.vue
@@ -82,7 +82,7 @@ export default defineComponent({
height: 100%;
padding: inherit;
padding-left: 8px;
- background-color: var(--background-color);
+ background-color: var(--background-page);
.expand {
transform: rotate(180deg);
diff --git a/src/views/private/components/header-bar/header-bar.vue b/src/views/private/components/header-bar/header-bar.vue
index 0173a82cac..dd8b11e190 100644
--- a/src/views/private/components/header-bar/header-bar.vue
+++ b/src/views/private/components/header-bar/header-bar.vue
@@ -12,7 +12,7 @@
-
{{ title }}
+ {{ title }}
@@ -68,7 +68,6 @@ export default defineComponent({
diff --git a/src/views/private/components/notification-item/notification-item.vue b/src/views/private/components/notification-item/notification-item.vue
index 461ea75b45..821d677ede 100644
--- a/src/views/private/components/notification-item/notification-item.vue
+++ b/src/views/private/components/notification-item/notification-item.vue
@@ -82,7 +82,7 @@ export default defineComponent({
margin-bottom: 4px;
padding: 12px;
color: var(--white);
- border-radius: var(--button-border-radius);
+ border-radius: var(--border-radius);
.icon {
display: block;
@@ -142,14 +142,14 @@ export default defineComponent({
}
&.info {
- background-color: var(--accent);
+ background-color: var(--primary);
&.tail::after {
- background-color: var(--accent);
+ background-color: var(--primary);
}
.text {
- color: var(--accent-light);
+ color: var(--primary-alt);
}
}
@@ -161,7 +161,7 @@ export default defineComponent({
}
.text {
- color: var(--success-light);
+ color: var(--success-alt);
}
}
@@ -173,7 +173,7 @@ export default defineComponent({
}
.text {
- color: var(--warning-light);
+ color: var(--warning-alt);
}
}
@@ -185,7 +185,7 @@ export default defineComponent({
}
.text {
- color: var(--danger-light);
+ color: var(--danger-alt);
}
}
}
diff --git a/src/views/private/components/project-chooser/project-chooser.vue b/src/views/private/components/project-chooser/project-chooser.vue
index 736f48aba7..24479fec13 100644
--- a/src/views/private/components/project-chooser/project-chooser.vue
+++ b/src/views/private/components/project-chooser/project-chooser.vue
@@ -59,7 +59,7 @@ export default defineComponent({
align-items: center;
justify-content: center;
height: 64px;
- background-color: var(--highlight);
+ background-color: var(--background-subdued);
select {
position: absolute;
diff --git a/src/views/private/private-view.vue b/src/views/private/private-view.vue
index d800294cd7..ddfb30074c 100644
--- a/src/views/private/private-view.vue
+++ b/src/views/private/private-view.vue
@@ -184,7 +184,7 @@ export default defineComponent({
z-index: 30;
width: 284px;
height: 100%;
- background-color: var(--background-color-alt);
+ background-color: var(--background-normal);
transform: translateX(100%);
transition: transform var(--slow) var(--transition);
@@ -211,7 +211,7 @@ export default defineComponent({
}
@include breakpoint(small) {
- --private-view-content-padding: 32px;
+ --content-padding: 32px;
}
}
diff --git a/src/views/public/public-view.story.ts b/src/views/public/public-view.story.ts
index df9de001ac..2740a13719 100644
--- a/src/views/public/public-view.story.ts
+++ b/src/views/public/public-view.story.ts
@@ -16,6 +16,6 @@ export default {
export const basic = () => `