diff --git a/src/.vitepress/theme/components/CustomDoc.vue b/src/.vitepress/theme/components/CustomDoc.vue index 2adc196..06e1e83 100644 --- a/src/.vitepress/theme/components/CustomDoc.vue +++ b/src/.vitepress/theme/components/CustomDoc.vue @@ -73,58 +73,70 @@ const pageName = computed(() => - + + + + + + + + + + diff --git a/src/assets/icons/beta.svg b/src/assets/icons/beta.svg new file mode 100644 index 0000000..d25c21d --- /dev/null +++ b/src/assets/icons/beta.svg @@ -0,0 +1,8 @@ + + + Created with Pixso. + + + + + diff --git a/src/assets/icons/centos.svg b/src/assets/icons/centos.svg new file mode 100644 index 0000000..87dabf7 --- /dev/null +++ b/src/assets/icons/centos.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/check.svg b/src/assets/icons/check.svg new file mode 100644 index 0000000..05d341a --- /dev/null +++ b/src/assets/icons/check.svg @@ -0,0 +1,7 @@ + + + Created with Pixso. + + + + diff --git a/src/assets/icons/debian.svg b/src/assets/icons/debian.svg new file mode 100644 index 0000000..15c3108 --- /dev/null +++ b/src/assets/icons/debian.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/docker.svg b/src/assets/icons/docker.svg new file mode 100644 index 0000000..a2becd6 --- /dev/null +++ b/src/assets/icons/docker.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/icons/fedora.svg b/src/assets/icons/fedora.svg new file mode 100644 index 0000000..1a14d06 --- /dev/null +++ b/src/assets/icons/fedora.svg @@ -0,0 +1,35 @@ + + + + + + + + + \ No newline at end of file diff --git a/src/assets/icons/file.png b/src/assets/icons/file.png new file mode 100644 index 0000000..f1b2062 Binary files /dev/null and b/src/assets/icons/file.png differ diff --git a/src/assets/icons/freebsd.svg b/src/assets/icons/freebsd.svg new file mode 100644 index 0000000..ac31134 --- /dev/null +++ b/src/assets/icons/freebsd.svg @@ -0,0 +1,10 @@ + + + + \ No newline at end of file diff --git a/src/assets/icons/oel.svg b/src/assets/icons/oel.svg new file mode 100644 index 0000000..a673f35 --- /dev/null +++ b/src/assets/icons/oel.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/oracle-linux.svg b/src/assets/icons/oracle-linux.svg new file mode 100644 index 0000000..678fb19 --- /dev/null +++ b/src/assets/icons/oracle-linux.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/pdf.svg b/src/assets/icons/pdf.svg new file mode 100644 index 0000000..69b3f95 --- /dev/null +++ b/src/assets/icons/pdf.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/icons/postgresql.svg b/src/assets/icons/postgresql.svg new file mode 100644 index 0000000..fd40f7f --- /dev/null +++ b/src/assets/icons/postgresql.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/icons/redhat.svg b/src/assets/icons/redhat.svg new file mode 100644 index 0000000..86e77c3 --- /dev/null +++ b/src/assets/icons/redhat.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/rocky.svg b/src/assets/icons/rocky.svg new file mode 100644 index 0000000..1dc2226 --- /dev/null +++ b/src/assets/icons/rocky.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/suselinux.svg b/src/assets/icons/suselinux.svg new file mode 100644 index 0000000..773858c --- /dev/null +++ b/src/assets/icons/suselinux.svg @@ -0,0 +1,57 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/icons/ubuntu.svg b/src/assets/icons/ubuntu.svg new file mode 100644 index 0000000..2421925 --- /dev/null +++ b/src/assets/icons/ubuntu.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/vyos.svg b/src/assets/icons/vyos.svg new file mode 100644 index 0000000..6688399 --- /dev/null +++ b/src/assets/icons/vyos.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/icons/windows.svg b/src/assets/icons/windows.svg new file mode 100644 index 0000000..9a13825 --- /dev/null +++ b/src/assets/icons/windows.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/images/_cloud.png b/src/assets/images/_cloud.png new file mode 100644 index 0000000..4762142 Binary files /dev/null and b/src/assets/images/_cloud.png differ diff --git a/src/assets/images/cloud.png b/src/assets/images/cloud.png new file mode 100644 index 0000000..98ca25d Binary files /dev/null and b/src/assets/images/cloud.png differ diff --git a/src/assets/images/debian.svg b/src/assets/images/debian.svg new file mode 100644 index 0000000..15c3108 --- /dev/null +++ b/src/assets/images/debian.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/empty-box-gray.png b/src/assets/images/empty-box-gray.png new file mode 100644 index 0000000..26e2173 Binary files /dev/null and b/src/assets/images/empty-box-gray.png differ diff --git a/src/assets/images/empty-box.svg b/src/assets/images/empty-box.svg new file mode 100644 index 0000000..df1ffef --- /dev/null +++ b/src/assets/images/empty-box.svg @@ -0,0 +1,12 @@ + + + Created with Pixso. + + + + + + + + + diff --git a/src/assets/images/empty-list.svg b/src/assets/images/empty-list.svg new file mode 100644 index 0000000..1bc340a --- /dev/null +++ b/src/assets/images/empty-list.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/images/errors/error_403.png b/src/assets/images/errors/error_403.png new file mode 100644 index 0000000..3c8f5e3 Binary files /dev/null and b/src/assets/images/errors/error_403.png differ diff --git a/src/assets/images/errors/error_404.png b/src/assets/images/errors/error_404.png new file mode 100644 index 0000000..7c9e01f Binary files /dev/null and b/src/assets/images/errors/error_404.png differ diff --git a/src/assets/images/errors/error_500.png b/src/assets/images/errors/error_500.png new file mode 100644 index 0000000..f0637d0 Binary files /dev/null and b/src/assets/images/errors/error_500.png differ diff --git a/src/assets/images/guard.png b/src/assets/images/guard.png new file mode 100644 index 0000000..f72d062 Binary files /dev/null and b/src/assets/images/guard.png differ diff --git a/src/assets/images/hyper-v.svg b/src/assets/images/hyper-v.svg new file mode 100644 index 0000000..765d6ce --- /dev/null +++ b/src/assets/images/hyper-v.svg @@ -0,0 +1,46 @@ + + + +Hyper-v diff --git a/src/assets/images/matrix.svg b/src/assets/images/matrix.svg new file mode 100644 index 0000000..4e5bfb4 --- /dev/null +++ b/src/assets/images/matrix.svg @@ -0,0 +1,9 @@ + + + Matrix (protocol) logo + + + + + + diff --git a/src/assets/images/oel.svg b/src/assets/images/oel.svg new file mode 100644 index 0000000..a673f35 --- /dev/null +++ b/src/assets/images/oel.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/ol.png b/src/assets/images/ol.png new file mode 100644 index 0000000..c412f97 Binary files /dev/null and b/src/assets/images/ol.png differ diff --git a/src/assets/images/openstack.svg b/src/assets/images/openstack.svg new file mode 100644 index 0000000..ea30c2d --- /dev/null +++ b/src/assets/images/openstack.svg @@ -0,0 +1,43 @@ + + + + diff --git a/src/assets/images/oracle-linuxl.png b/src/assets/images/oracle-linuxl.png new file mode 100644 index 0000000..c412f97 Binary files /dev/null and b/src/assets/images/oracle-linuxl.png differ diff --git a/src/assets/images/redhat.svg b/src/assets/images/redhat.svg new file mode 100644 index 0000000..86e77c3 --- /dev/null +++ b/src/assets/images/redhat.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/search.svg b/src/assets/images/search.svg new file mode 100644 index 0000000..eec99ed --- /dev/null +++ b/src/assets/images/search.svg @@ -0,0 +1,12 @@ + + + Created with Pixso. + + + + + + + + + diff --git a/src/assets/images/success-check.png b/src/assets/images/success-check.png new file mode 100644 index 0000000..240ce96 Binary files /dev/null and b/src/assets/images/success-check.png differ diff --git a/src/assets/images/vmware.svg b/src/assets/images/vmware.svg new file mode 100644 index 0000000..b1688d0 --- /dev/null +++ b/src/assets/images/vmware.svg @@ -0,0 +1,54 @@ + + + + diff --git a/src/assets/scss/app/_base.scss b/src/assets/scss/app/_base.scss new file mode 100644 index 0000000..57955de --- /dev/null +++ b/src/assets/scss/app/_base.scss @@ -0,0 +1,38 @@ +@use '@beeline/design-tokens/scss/tokens/themes' as *; + +:root { + --app-navbar-height: #{$app-navbar-height}; +} + +* { + box-sizing: border-box; +} + +html, +body { + margin: 0; + padding: 0; + width: 100%; + height: 100vh; +} + +html { + overflow-y: auto; +} + +#app { + height: 100vh; +} + +html.dark-theme { + background-color: $color-background-base; + color: $color-text-active; +} + +a:visited { + color: $color-text-active !important; +} + +a:hover { + text-decoration: none !important; +} diff --git a/src/assets/scss/app/_index.scss b/src/assets/scss/app/_index.scss new file mode 100644 index 0000000..7c0f72f --- /dev/null +++ b/src/assets/scss/app/_index.scss @@ -0,0 +1,5 @@ +@import 'variables'; +@import 'base'; +@import 'form'; +@import 'helpers'; +@import 'components'; diff --git a/src/assets/scss/app/_variables.scss b/src/assets/scss/app/_variables.scss new file mode 100644 index 0000000..ad18632 --- /dev/null +++ b/src/assets/scss/app/_variables.scss @@ -0,0 +1,3 @@ +// Navbar +$app-navbar-height: 3.5rem; +$app-header-height: 64px; diff --git a/src/assets/scss/app/components/_fab.scss b/src/assets/scss/app/components/_fab.scss new file mode 100644 index 0000000..c0ffcc1 --- /dev/null +++ b/src/assets/scss/app/components/_fab.scss @@ -0,0 +1,122 @@ +@use '@beeline/design-tokens/scss/tokens/themes' as *; +@use '@beeline/design-tokens/scss/tokens/components/fab' as *; +@use '@beeline/design-tokens/scss/tokens/components/button' as *; +@use '@beeline/design-tokens/scss/tokens/globals' as *; +@use '@beeline/design-tokens/scss/mixin'; + +@mixin fab_button { + background-color: $button-overlay-background-color; + padding-left: $button-only-text-small-padding-horizontal; + padding-right: $button-only-text-small-padding-horizontal; + letter-spacing: $button-small-text-font-letter-spacing; + line-height: $button-small-text-font-line-height; + font-size: $button-small-text-font-size; + height: $button-small-height; + color: $button-overlay-text-color; + box-shadow: none; + border: 1px solid $button-outline-border-color; + border-radius: $button-border-radius; + + &:hover { + cursor: pointer; + background-color: $button-overlay-background-color-hover; + } +} + +.app-fab { + height: $fab-standard-height; + width: $fab-standard-width; + position: fixed; + z-index: 50; + display: inline-flex; + align-items: center; + border: 0; + padding: $fab-standard-padding; + letter-spacing: $fab-text-font-letter-spacing; + line-height: $fab-text-font-line-height; + font-size: $fab-text-font-size; + font-weight: $fab-text-font-weight; + box-shadow: $fab-shadow; + background-color: $color-background-inverse; + color: $color-text-active-inverse; + cursor: pointer; + + &__icon { + width: 24px; + height: 24px; + } + + &:hover { + // background-color: $fab-hover-background-color; + } + + &--focused { + border-color: $fab-focused-border-color; + border-width: $fab-focused-border-width; + } + + &--mini { + height: $fab-mini-height; + width: $fab-mini-width; + border-radius: $fab-mini-border-radius; + padding: $fab-mini-padding; + } + + &--extended { + height: $fab-extended-height; + border-radius: $fab-extended-border-radius; + padding-right: $fab-extended-padding-right; + padding-left: $fab-extended-padding-left; + + & &__icon { + margin-right: $fab-extended-icon-spacing; + } + } + + .app-fab--extended.app-fab--mini { + height: $fab-mini-height; + } + + &--disabled { + opacity: $fab-disabled-opacity; + } +} + +.app-fab-dialog { + position: fixed; + bottom: 44px; + right: 0; + // background-color: $color-background-medium; + background-color: transparent; + // border-radius: 12px; + padding: 1rem; + // border: 1px solid $color-border; + // min-width: 300px; + // box-shadow: $elevation-medium; + + .icon-contained { + display: inline-flex; + justify-content: center; + align-items: center; + width: 40px; + height: 40px; + background-color: $color-status-neutral-background; + color: $color-status-neutral; + border-radius: 12px; + } + + #feedback_button { + @include fab_button(); + } + + #bug_button { + @include fab_button(); + line-height: 38px; + } + + a#bug_button, + a#bug_button:visited, + a#bug_button:active { + color: $button-overlay-text-color !important; + } +} diff --git a/src/assets/scss/app/components/_index.scss b/src/assets/scss/app/components/_index.scss new file mode 100644 index 0000000..5378e7b --- /dev/null +++ b/src/assets/scss/app/components/_index.scss @@ -0,0 +1 @@ +@import 'fab'; diff --git a/src/assets/scss/app/form/_index.scss b/src/assets/scss/app/form/_index.scss new file mode 100644 index 0000000..b6c8b11 --- /dev/null +++ b/src/assets/scss/app/form/_index.scss @@ -0,0 +1,2 @@ +// @import "textfield"; +// @import "textarea"; diff --git a/src/assets/scss/app/form/_states.scss b/src/assets/scss/app/form/_states.scss new file mode 100644 index 0000000..de55a33 --- /dev/null +++ b/src/assets/scss/app/form/_states.scss @@ -0,0 +1 @@ +@use '@beeline/design-tokens/scss/tokens/components/formfield' as formfield; diff --git a/src/assets/scss/app/form/_textarea.scss b/src/assets/scss/app/form/_textarea.scss new file mode 100644 index 0000000..3548f63 --- /dev/null +++ b/src/assets/scss/app/form/_textarea.scss @@ -0,0 +1,107 @@ +@use '@beeline/design-tokens/scss/tokens/components/textarea' as *; +@use '@beeline/design-tokens/scss/tokens/components/formfield'; +@use '@beeline/design-tokens/scss/tokens/themes'; + +.textarea-field { + $px: 16px; + + display: block; + width: 100%; + position: relative; + padding: $textarea-without-label-medium-text-margin-top $px $textarea-text-margin-bottom; + height: $textarea-without-label-medium-height; + background: formfield.$formfield-background-color; + border: formfield.$formfield-border-width formfield.$formfield-border-style formfield.$formfield-border-color; + border-radius: formfield.$formfield-border-radius; + + & &__label { + position: absolute; + top: $textarea-with-label-text-margin-top; + left: $px; + transition: font-size 300ms ease-out; + color: formfield.$formfield-label-color; + } + + & textarea { + height: $textarea-medium-text-height; + width: 100%; + outline: none; + border: none; + box-shadow: none; + resize: none; + background-color: transparent; + color: themes.$color-text-active; + + &:focus { + } + } + + & &__resizer { + position: absolute; + bottom: $textarea-resizer-margin-bottom; + right: $textarea-resizer-margin-right; + rotate: -45deg; + width: 1em; + height: 1em; + + &:hover { + cursor: nwse-resize; + } + + &::before { + content: ''; + display: flex; + background-color: darkslategrey; + width: 10px; + height: 1px; + } + + &::after { + content: ''; + display: flex; + position: relative; + right: -3px; + bottom: -2px; + background-color: darkslategrey; + width: 4px; + height: 1px; + } + } + + &.textarea-field--with-label { + height: $textarea-with-label-medium-height; + padding-top: $textarea-with-label-text-margin-top; + + &.textarea-field--floated .textarea-field__label { + top: $textarea-medium-label-floated-margin-top; + line-height: $textarea-small-label-floated-font-line-height; + font-size: $textarea-small-label-floated-font-size; + } + + &.textarea-field--small { + height: $textarea-with-label-small-height; + padding-top: $textarea-small-label-margin-top; + top: $textarea-small-label-floated-margin-top; + + & .textarea-field__label { + font-size: $textarea-small-label-font-size; + font-weight: $textarea-small-label-font-weight; + letter-spacing: $textarea-small-label-font-letter-spacing; + } + } + } + + &.textarea-field--focused { + border-color: formfield.$formfield-border-color-focus; + background-color: transparent; + } + + &.textarea-field--small { + padding-top: $textarea-without-label-small-text-margin-top; + height: $textarea-without-label-small-height; + + & textarea { + height: $textarea-small-text-height; + } + } +} diff --git a/src/assets/scss/app/form/_textfield.scss b/src/assets/scss/app/form/_textfield.scss new file mode 100644 index 0000000..67b0195 --- /dev/null +++ b/src/assets/scss/app/form/_textfield.scss @@ -0,0 +1,77 @@ +@use '@beeline/design-tokens/scss/tokens/components/textfield' as *; +@use '@beeline/design-tokens/scss/tokens/globals'; +@use '@beeline/design-tokens/scss/tokens/themes' as theme; + +.textfield { + display: block; + position: relative; + width: 100%; + height: globals.$size-control-height-medium; + border: globals.$size-border-width-regular solid transparent; + padding-top: $textfield-without-label-medium-text-margin-vertical; + padding-bottom: $textfield-without-label-medium-text-margin-vertical; + background-color: theme.$color-control-background; + border-radius: 12px; // globals.$size-border-radius-x6; + + &:hover { + background-color: theme.$color-control-background-hover; + } + + // input + input { + outline: none; + box-shadow: none; + + &:focus { + } + } + + // label + &--with-label { + // padding-top: $textfield-with-label-medium-text-margin-top; + // padding-bottom: $textfield-with-label-medium-text-margin-bottom; + } + + &__label { + // padding-top: $textfield-medium-label-margin-top; + + &.textfield__label--floated { + // padding-top: $textfield-medium-label-margin-top-floated; + } + } + + // icon-right + + // icon-left + + // small + &--small { + height: globals.$size-control-height-small; + } + + // large + &--large { + height: globals.$size-control-height-large; + padding-top: $textfield-without-label-large-text-margin-vertical; + padding-bottom: $textfield-without-label-large-text-margin-vertical; + + &.textfield--with-label { + padding-top: $textfield-with-label-large-text-margin-top; + padding-bottom: $textfield-with-label-large-text-margin-bottom; + } + + .textfield__label { + padding-top: $textfield-large-label-margin-top; + + &.textfield__label--floated { + padding-top: $textfield-large-label-margin-top-floated; + } + } + } + + // states + &--focused { + border-color: theme.$color-border-focus; + background-color: theme.$color-background-base; + } +} diff --git a/src/assets/scss/app/helpers/_color.scss b/src/assets/scss/app/helpers/_color.scss new file mode 100644 index 0000000..f2a1ae3 --- /dev/null +++ b/src/assets/scss/app/helpers/_color.scss @@ -0,0 +1,5 @@ +@use '@beeline/design-tokens/scss/tokens/themes' as *; + +.app-bg-status-error { + background-color: $color-status-error-background; +} diff --git a/src/assets/scss/app/helpers/_common.scss b/src/assets/scss/app/helpers/_common.scss new file mode 100644 index 0000000..0b1bf9c --- /dev/null +++ b/src/assets/scss/app/helpers/_common.scss @@ -0,0 +1,3 @@ +.app-cursor-pointer { + cursor: pointer; +} diff --git a/src/assets/scss/app/helpers/_index.scss b/src/assets/scss/app/helpers/_index.scss new file mode 100644 index 0000000..befdba2 --- /dev/null +++ b/src/assets/scss/app/helpers/_index.scss @@ -0,0 +1,4 @@ +@import 'text'; +@import 'color'; +@import 'media'; +@import 'common'; diff --git a/src/assets/scss/app/helpers/_media.scss b/src/assets/scss/app/helpers/_media.scss new file mode 100644 index 0000000..844f942 --- /dev/null +++ b/src/assets/scss/app/helpers/_media.scss @@ -0,0 +1,39 @@ +// @deprecated +@mixin media($minWidth, $maxWidth) { + @media (min-width: $minWidth) and (max-width: $maxWidth) { + @content; + } +} + +// @deprecated +@mixin media_max($maxWidth) { + @media (max-width: $maxWidth) { + @content; + } +} + +// @deprecated +@mixin media_min($minWidth) { + @media (min-width: $minWidth) { + @content; + } +} + +$breakpoints: ( + xl: 1600px, + lg: 1400px, + md: 1200px, + sm: 960px, +); + +@mixin max($breakpoint) { + $value: map-get($breakpoints, $breakpoint); + + @if $value { + @media (max-width: $value) { + @content; + } + } @else { + @error "Breakpoint #{$breakpoint} not found"; + } +} diff --git a/src/assets/scss/app/helpers/_text.scss b/src/assets/scss/app/helpers/_text.scss new file mode 100644 index 0000000..87643d8 --- /dev/null +++ b/src/assets/scss/app/helpers/_text.scss @@ -0,0 +1,80 @@ +@use '@beeline/design-tokens/scss/tokens/themes' as theme; +@use 'src/assets/scss/app/mixins' as mixins; + +@mixin truncate { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +@mixin truncate-lines($lines: 2) { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: $lines; + overflow: hidden; + text-overflow: ellipsis; +} + +.app-text-active { + color: theme.$color-text-active; +} + +.app-text-inactive { + color: theme.$color-text-inactive; +} + +// styles for hyperlinks +.app-link { + color: theme.$color-text-active; + + &:hover { + color: theme.$color-text-active; + } +} + +.app-text-caption { + @include mixins.text-caption; +} + +.app-text-truncate { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +// Sizes +.app-text-size-subtitle-3 { + font-size: 15px; + line-height: 20px; + font-weight: 500; + letter-spacing: 0.2px; +} + +.app-text-size-body-3 { + font-size: 15px; + line-height: 18px; + letter-spacing: 0.2px; + font-weight: 400; +} + +// Colors +.app-text-color-caption { + color: theme.$color-text-inactive; +} +.app-text-warning { + color: theme.$color-status-warning; +} +.app-text-info { + color: theme.$color-status-info; +} +.app-text-error { + color: theme.$color-status-error; +} +.app-text-success { + color: theme.$color-status-success; +} + +// Breaks +.app-break-keep-all { + word-break: keep-all; +} diff --git a/src/assets/scss/app/loading/_index.scss b/src/assets/scss/app/loading/_index.scss new file mode 100644 index 0000000..9db6afc --- /dev/null +++ b/src/assets/scss/app/loading/_index.scss @@ -0,0 +1 @@ +@import 'spinner'; diff --git a/src/assets/scss/app/loading/_spinner.scss b/src/assets/scss/app/loading/_spinner.scss new file mode 100644 index 0000000..b4ad289 --- /dev/null +++ b/src/assets/scss/app/loading/_spinner.scss @@ -0,0 +1,6 @@ +@use 'src/assets/scss/app/variables' as v; + +.app-loading-screen { + display: block; + height: calc(100vh - v.$app-header-height); +} diff --git a/src/assets/scss/app/mixins/_index.scss b/src/assets/scss/app/mixins/_index.scss new file mode 100644 index 0000000..b4cc8bf --- /dev/null +++ b/src/assets/scss/app/mixins/_index.scss @@ -0,0 +1 @@ +@forward 'text'; diff --git a/src/assets/scss/app/mixins/_text.scss b/src/assets/scss/app/mixins/_text.scss new file mode 100644 index 0000000..f82e07e --- /dev/null +++ b/src/assets/scss/app/mixins/_text.scss @@ -0,0 +1,29 @@ +@use '@beeline/design-tokens/scss/tokens/themes' as theme; + +%text_caption { + font-size: 13px; + line-height: 16px; +} + +@mixin text_caption { + @extend %text_caption; + color: theme.$color-text-inactive; +} + +@mixin text_caption_error { + @extend %text_caption; + color: theme.$color-status-error; +} + +@mixin text_body_2 { + font-style: normal; + font-weight: 400; + font-size: 17px; + line-height: 22px; +} + +@mixin truncate { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} diff --git a/src/assets/scss/beeline/_base.scss b/src/assets/scss/beeline/_base.scss new file mode 100644 index 0000000..32d1a37 --- /dev/null +++ b/src/assets/scss/beeline/_base.scss @@ -0,0 +1,10 @@ +@use '@beeline/design-tokens/scss/tokens/themes'; +@use '@beeline/design-tokens/scss/tokens/themes/dark'; + +:root { + @include themes.theme(); +} + +.dark-theme { + @include themes.theme(dark.$theme); +} diff --git a/src/assets/scss/beeline/_fonts.scss b/src/assets/scss/beeline/_fonts.scss new file mode 100644 index 0000000..80ae84a --- /dev/null +++ b/src/assets/scss/beeline/_fonts.scss @@ -0,0 +1,3 @@ +@use '@beeline/design-tokens/scss/font-face' with ( + $font-path-beeline-sans: '../fonts/beeline-sans' +); diff --git a/src/assets/scss/beeline/_icons.scss b/src/assets/scss/beeline/_icons.scss new file mode 100644 index 0000000..c7e2ed7 --- /dev/null +++ b/src/assets/scss/beeline/_icons.scss @@ -0,0 +1,40 @@ +// @use "@beeline/design-tokens/scss/iconfont/iconfont" with ( +// $font-path-iconfont: '../fonts/iconfont' +// ); +@use '@beeline/design-tokens/scss/iconfont/icons'; + +@font-face { + font-display: block; + font-family: 'BeelineIcons'; + font-style: normal; + font-weight: 400; + src: + url('../fonts/iconfont/BeelineIcons.woff2') format('woff2'), + url('../fonts/iconfont/BeelineIcons.woff') format('woff'), + url('../fonts/iconfont/BeelineIcons.ttf') format('ttf'); +} + +.beeline-icons { + font-family: 'BeelineIcons', sans-serif; + font-weight: normal; + font-style: normal; + font-size: 24px; /* Preferred icon size */ + display: inline-block; + line-height: 1; + text-transform: none; + letter-spacing: normal; + word-wrap: normal; + white-space: nowrap; + direction: ltr; + + /* Support for all WebKit browsers. */ + -webkit-font-smoothing: antialiased; + /* Support for Safari and Chrome. */ + text-rendering: optimizeLegibility; + + /* Support for Firefox. */ + -moz-osx-font-smoothing: grayscale; + + /* Support for IE. */ + font-feature-settings: 'liga'; +} diff --git a/src/assets/scss/beeline/_index.scss b/src/assets/scss/beeline/_index.scss new file mode 100644 index 0000000..284afd7 --- /dev/null +++ b/src/assets/scss/beeline/_index.scss @@ -0,0 +1,4 @@ +@import 'fonts'; +@import 'icons'; +@import 'base'; +@import 'scrollbar'; diff --git a/src/assets/scss/beeline/_scrollbar.scss b/src/assets/scss/beeline/_scrollbar.scss new file mode 100644 index 0000000..ddd4d61 --- /dev/null +++ b/src/assets/scss/beeline/_scrollbar.scss @@ -0,0 +1,29 @@ +@use '@beeline/design-tokens/scss/tokens/themes'; + +html { + scrollbar-color: themes.$color-text-inactive transparent; +} + +* { + scrollbar-width: thin; +} + +body::-webkit-scrollbar { + display: none; +} + +::-webkit-scrollbar { + width: 15px; +} + +::-webkit-scrollbar-track { + background-color: transparent; +} + +::-webkit-scrollbar-thumb { + background-color: themes.$color-text-inactive; + border: 4px solid transparent; + background-clip: content-box; + border-radius: 100px; + min-height: 28px; +} diff --git a/src/assets/scss/bulma/_index.scss b/src/assets/scss/bulma/_index.scss new file mode 100644 index 0000000..6234e22 --- /dev/null +++ b/src/assets/scss/bulma/_index.scss @@ -0,0 +1,51 @@ +@use 'sass:map'; +@use '@beeline/design-tokens/scss/tokens/globals'; +@use '@beeline/design-tokens/scss/tokens/themes/light'; +@use '@beeline/design-tokens/scss/tokens/components/button'; + +// Colors +$primary: globals.$color-background-brand; +$background: map.get(light.$theme, 'color-background-base'); +$info: map.get(light.$theme, 'color-status-info'); +$success: map.get(light.$theme, 'color-status-success'); +$warning: map.get(light.$theme, 'color-status-warning'); +$danger: map.get(light.$theme, 'color-status-error'); + +// Typography +$family-primary: globals.$font-family-text; +$title-color: map.get(light.$theme, 'color-text-active'); +$subtitle-color: map.get(light.$theme, 'color-text-inactive'); + +// Radius +$radius: globals.$size-border-radius-x6; + +// Buttons +$button-padding-vertical: globals.$size-spacing-x4; +$button-padding-horizontal: globals.$size-spacing-x5; +$button-background-color: button.$button-plain-background-color; +$button-focus-border-color: map.get(light.$theme, 'color-background-base-focused'); +$button-disabled-opacity: button.$button-opacity-disabled; + +// Box +$box-radius: $radius; +$box-shadow: globals.$elevation-low; +$box-padding: globals.$size-spacing-x6; +$box-link-hover-shadow: globals.$elevation-medium; +$box-link-active-shadow: globals.$elevation-medium; + +// Form +$input-color: map.get(light.$theme, 'color-text-active'); +$input-background-color: map.get(light.$theme, 'color-control-background'); +$label-color: map.get(light.$theme, 'color-text-inactive'); +$label-weight: globals.$font-weight-caption; + +// Table +$table-color: map.get(light.$theme, 'color-text-active'); +$table-background-color: map.get(light.$theme, 'color-background-base'); +$table-cell-border: 1px solid map.get(light.$theme, 'color-control-background'); +$table-cell-padding: 16px 16px; +$table-cell-heading-color: map.get(light.$theme, 'color-text-active'); +$table-head-cell-border-width: 1px; + +@import 'bulma/bulma'; +@import 'overrides'; diff --git a/src/assets/scss/bulma/overrides/_box.scss b/src/assets/scss/bulma/overrides/_box.scss new file mode 100644 index 0000000..b5513e5 --- /dev/null +++ b/src/assets/scss/bulma/overrides/_box.scss @@ -0,0 +1,12 @@ +@use 'sass:map'; +@use '@beeline/design-tokens/scss/tokens/themes/dark'; + +.box { + .dark-theme & { + background-color: map.get(dark.$theme, 'color-background-low'); + + &:hover { + background-color: map.get(dark.$theme, 'color-background-medium'); + } + } +} diff --git a/src/assets/scss/bulma/overrides/_button.scss b/src/assets/scss/bulma/overrides/_button.scss new file mode 100644 index 0000000..315c414 --- /dev/null +++ b/src/assets/scss/bulma/overrides/_button.scss @@ -0,0 +1,11 @@ +@use '@beeline/design-tokens/scss/tokens/components/button' as button; +@use '@beeline/design-tokens/scss/tokens/themes'; + +.button { + font-weight: button.$button-medium-text-font-weight; + color: themes.$color-text-active; + + &:hover { + color: themes.$color-text-active; + } +} diff --git a/src/assets/scss/bulma/overrides/_dropdown.scss b/src/assets/scss/bulma/overrides/_dropdown.scss new file mode 100644 index 0000000..b0bcd71 --- /dev/null +++ b/src/assets/scss/bulma/overrides/_dropdown.scss @@ -0,0 +1,16 @@ +@use '@beeline/design-tokens/scss/tokens/themes'; + +.dropdown { + &-content { + background-color: themes.$color-background-medium; + } + + .dropdown-item { + color: themes.$color-text-active; + + &:hover { + background-color: themes.$color-background-base-hover; + color: themes.$color-text-active; + } + } +} diff --git a/src/assets/scss/bulma/overrides/_index.scss b/src/assets/scss/bulma/overrides/_index.scss new file mode 100644 index 0000000..e984265 --- /dev/null +++ b/src/assets/scss/bulma/overrides/_index.scss @@ -0,0 +1,7 @@ +@import 'button'; +@import 'title'; +@import 'box'; +@import 'form'; +@import 'table'; +@import 'dropdown'; +@import 'text'; diff --git a/src/assets/scss/bulma/overrides/_table.scss b/src/assets/scss/bulma/overrides/_table.scss new file mode 100644 index 0000000..6c9eca2 --- /dev/null +++ b/src/assets/scss/bulma/overrides/_table.scss @@ -0,0 +1,42 @@ +@use 'sass:map'; +@use '@beeline/design-tokens/scss/tokens/globals'; +@use '@beeline/design-tokens/scss/tokens/themes/light'; +@use '@beeline/design-tokens/scss/tokens/themes/dark'; +@use '@beeline/design-tokens/scss/tokens/components/button'; + +.table { + .dark-theme & { + color: map.get(dark.$theme, 'color-text-active'); + background-color: map.get(dark.$theme, 'color-background-base'); + + td, + th { + border: 1px solid map.get(dark.$theme, 'color-control-background'); + } + + th { + color: map.get(dark.$theme, 'color-text-active'); + } + } + + td, + th { + border-width: 1px; + border-style: solid; + } + + th { + font-weight: globals.$font-weight-medium; + } + + tbody { + tr { + &:last-child { + td, + th { + border-bottom-width: 1px; + } + } + } + } +} diff --git a/src/assets/scss/bulma/overrides/_text.scss b/src/assets/scss/bulma/overrides/_text.scss new file mode 100644 index 0000000..14eef2f --- /dev/null +++ b/src/assets/scss/bulma/overrides/_text.scss @@ -0,0 +1,15 @@ +@use '@beeline/design-tokens/scss/tokens/themes' as *; + +code { + background-color: $color-background-base; +} + +pre { + color: $color-text-active; + background-color: $color-background-base; +} + +.help { + font-size: 13px; + line-height: 16px; +} diff --git a/src/assets/scss/bulma/overrides/_title.scss b/src/assets/scss/bulma/overrides/_title.scss new file mode 100644 index 0000000..94c1928 --- /dev/null +++ b/src/assets/scss/bulma/overrides/_title.scss @@ -0,0 +1,38 @@ +@use '@beeline/design-tokens/scss/mixin' as bee; + +.title { + @include bee.h3(); + + &.is-1 { + @include bee.h1(); + } + &.is-2 { + @include bee.h2(); + } + &.is-3 { + @include bee.h3(); + } + &.is-4 { + @include bee.h4(); + } + &.is-5 { + @include bee.h5(); + } + &.is-6 { + @include bee.h6(); + } +} + +.subtitle { + @include bee.subtitle2(); + + &.is-1 { + @include bee.subtitle1(); + } + &.is-2 { + @include bee.subtitle2(); + } + &.is-3 { + @include bee.subtitle3(); + } +} diff --git a/src/assets/scss/bulma/overrides/form/_index.scss b/src/assets/scss/bulma/overrides/form/_index.scss new file mode 100644 index 0000000..b0d4b14 --- /dev/null +++ b/src/assets/scss/bulma/overrides/form/_index.scss @@ -0,0 +1,4 @@ +@import 'shared'; +@import 'select'; +@import 'input-textarea'; +@import 'title'; diff --git a/src/assets/scss/bulma/overrides/form/_input-textarea.scss b/src/assets/scss/bulma/overrides/form/_input-textarea.scss new file mode 100644 index 0000000..c4a4faa --- /dev/null +++ b/src/assets/scss/bulma/overrides/form/_input-textarea.scss @@ -0,0 +1,46 @@ +@use 'sass:map'; +// @use "@beeline/design-tokens/scss/tokens/globals"; +@use '@beeline/design-tokens/scss/tokens/themes/light'; +@use '@beeline/design-tokens/scss/tokens/themes/dark'; + +%input-textarea { + box-shadow: none; + border: 1px solid transparent; + color: map.get(light.$theme, 'color-text-active'); + background: map.get(light.$theme, 'color-control-background'); + + &:hover { + border-color: map.get(light.$theme, 'color-border-focus'); + } + + .dark-theme & { + color: map.get(dark.$theme, 'color-text-active'); + background: map.get(dark.$theme, 'color-control-background'); + + &:hover { + border-color: map.get(dark.$theme, 'color-border-focus'); + } + } + + &:focus, + &.is-focused, + &:active, + &.is-active { + box-shadow: none !important; + border-color: map.get(light.$theme, 'color-border-focus'); + background: map.get(light.$theme, 'color-background-base'); + + .dark-theme & { + background: map.get(dark.$theme, 'color-background-base'); + border-color: map.get(dark.$theme, 'color-border-focus'); + } + } +} + +.input { + @extend %input-textarea; +} + +.textarea { + @extend %input-textarea; +} diff --git a/src/assets/scss/bulma/overrides/form/_select.scss b/src/assets/scss/bulma/overrides/form/_select.scss new file mode 100644 index 0000000..9dbeb19 --- /dev/null +++ b/src/assets/scss/bulma/overrides/form/_select.scss @@ -0,0 +1,48 @@ +@use 'sass:map'; +@use '@beeline/design-tokens/scss/tokens/themes/dark'; +@use '@beeline/design-tokens/scss/tokens/themes/light'; + +.select { + select { + border: 1px solid transparent; + + &:focus, + &:active { + border: 1px solid map.get(light.$theme, 'color-border-focus'); + background-color: map.get(light.$theme, 'color-background-base'); + box-shadow: none; + } + } + + &:not(.is-multiple):not(.is-loading)::after { + content: none; + } + + &:focus, + &.is-focused, + &:active, + &.is-active { + select { + border: 1px solid map.get(light.$theme, 'color-border-focus'); + background-color: map.get(light.$theme, 'color-background-base'); + box-shadow: none; + } + + .dark-theme & { + select { + border: 1px solid map.get(dark.$theme, 'color-border-focus'); + background-color: map.get(dark.$theme, 'color-background-base'); + box-shadow: none; + } + } + } + + .dark-theme & { + color: map.get(dark.$theme, 'color-text-active'); + + & select { + color: map.get(dark.$theme, 'color-text-active'); + background-color: map.get(dark.$theme, 'color-control-background'); + } + } +} diff --git a/src/assets/scss/bulma/overrides/form/_shared.scss b/src/assets/scss/bulma/overrides/form/_shared.scss new file mode 100644 index 0000000..344f81e --- /dev/null +++ b/src/assets/scss/bulma/overrides/form/_shared.scss @@ -0,0 +1,11 @@ +@use 'sass:map'; +@use '@beeline/design-tokens/scss/tokens/globals'; +@use '@beeline/design-tokens/scss/tokens/themes/dark'; + +.label { + line-height: globals.$font-line-height-caption; + + .dark-theme & { + color: map.get(dark.$theme, 'color-text-inactive'); + } +} diff --git a/src/assets/scss/bulma/overrides/form/_title.scss b/src/assets/scss/bulma/overrides/form/_title.scss new file mode 100644 index 0000000..a5b4171 --- /dev/null +++ b/src/assets/scss/bulma/overrides/form/_title.scss @@ -0,0 +1,14 @@ +@use 'sass:map'; +@use '@beeline/design-tokens/scss/tokens/themes/dark'; + +.title { + .dark-theme & { + color: map.get(dark.$theme, 'color-text-active'); + } +} + +.subtitle { + .dark-theme & { + color: map.get(dark.$theme, 'color-text-inactive'); + } +} diff --git a/src/assets/scss/style.scss b/src/assets/scss/style.scss new file mode 100644 index 0000000..fea3547 --- /dev/null +++ b/src/assets/scss/style.scss @@ -0,0 +1,8 @@ +@use 'beeline'; +@use 'bulma'; +@use 'app'; + +.proto { + font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; + color: #f55; +}