├── preview ├── 1.png ├── 2.png ├── 3.png └── 4.png ├── themes ├── .DS_Store └── dark-rabbit │ ├── _theme.scss │ ├── scss │ ├── svg.scss │ ├── z-index.scss │ ├── resets.scss │ ├── queries.scss │ ├── toastify.scss │ ├── fonts.scss │ ├── type.scss │ ├── app.scss │ ├── vars.scss │ └── colors.scss │ ├── compnents │ ├── elements │ │ ├── Nav │ │ │ ├── NavToggler │ │ │ │ └── index.scss │ │ │ └── index.scss │ │ ├── ReactSelect │ │ │ ├── MultiValue │ │ │ │ └── index.scss │ │ │ └── index.scss │ │ ├── ColumnSelector │ │ │ └── index.scss │ │ ├── SearchFilter │ │ │ └── index.scss │ │ ├── Table │ │ │ └── index.scss │ │ ├── WhereBuilder │ │ │ └── index.scss │ │ ├── Thumbnail │ │ │ └── index.scss │ │ ├── Paginator │ │ │ └── index.scss │ │ ├── Card │ │ │ └── index.scss │ │ ├── DocumentHeader │ │ │ ├── index.scss │ │ │ └── Tabs │ │ │ │ ├── index.scss │ │ │ │ └── Tab │ │ │ │ └── index.scss │ │ ├── Popup │ │ │ ├── PopupButtonList │ │ │ │ └── index.scss │ │ │ └── index.scss │ │ ├── ListControls │ │ │ └── index.scss │ │ ├── NavGroup │ │ │ └── index.scss │ │ ├── FileDetails │ │ │ └── index.scss │ │ ├── Drawer │ │ │ └── index.scss │ │ ├── Pill │ │ │ └── index.scss │ │ ├── EditMany │ │ │ └── index.scss │ │ ├── DocumentFields │ │ │ └── index.scss │ │ ├── Collapsible │ │ │ └── index.scss │ │ ├── Button │ │ │ └── index.scss │ │ ├── DocumentControls │ │ │ └── index.scss │ │ └── DatePicker │ │ │ └── index.scss │ ├── forms │ │ ├── field-types │ │ │ ├── Collapsible │ │ │ │ └── index.scss │ │ │ ├── Select │ │ │ │ └── index.scss │ │ │ ├── Password │ │ │ │ └── index.scss │ │ │ ├── Text │ │ │ │ └── index.scss │ │ │ ├── Number │ │ │ │ └── index.scss │ │ │ ├── DateTime │ │ │ │ └── index.scss │ │ │ ├── ConfirmPassword │ │ │ │ └── index.scss │ │ │ ├── Relationship │ │ │ │ ├── AddNew │ │ │ │ │ └── index.scss │ │ │ │ ├── select-components │ │ │ │ │ ├── MultiValueLabel │ │ │ │ │ │ └── index.scss │ │ │ │ │ └── SingleValue │ │ │ │ │ │ └── index.scss │ │ │ │ └── index.scss │ │ │ ├── Email │ │ │ │ └── index.scss │ │ │ ├── JSON │ │ │ │ └── index.scss │ │ │ ├── Code │ │ │ │ └── index.scss │ │ │ ├── Point │ │ │ │ └── index.scss │ │ │ ├── Blocks │ │ │ │ ├── BlocksDrawer │ │ │ │ │ ├── BlockSearch │ │ │ │ │ │ └── index.scss │ │ │ │ │ └── index.scss │ │ │ │ ├── SectionTitle │ │ │ │ │ └── index.scss │ │ │ │ └── index.scss │ │ │ ├── Row │ │ │ │ └── index.scss │ │ │ ├── RadioGroup │ │ │ │ ├── index.scss │ │ │ │ └── RadioInput │ │ │ │ │ └── index.scss │ │ │ ├── Upload │ │ │ │ └── index.scss │ │ │ ├── Array │ │ │ │ └── index.scss │ │ │ ├── Textarea │ │ │ │ └── index.scss │ │ │ ├── Tabs │ │ │ │ └── index.scss │ │ │ ├── Group │ │ │ │ └── index.scss │ │ │ └── Checkbox │ │ │ │ └── index.scss │ │ └── Label │ │ │ └── index.scss │ └── views │ │ ├── Account │ │ └── index.scss │ │ ├── Dashboard │ │ └── index.scss │ │ └── collections │ │ └── Edit │ │ └── Auth │ │ └── index.scss │ ├── _theme-vars.scss │ └── index.scss └── README.md /preview/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MMTHDs/payload-theme-dark-rabbit/HEAD/preview/1.png -------------------------------------------------------------------------------- /preview/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MMTHDs/payload-theme-dark-rabbit/HEAD/preview/2.png -------------------------------------------------------------------------------- /preview/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MMTHDs/payload-theme-dark-rabbit/HEAD/preview/3.png -------------------------------------------------------------------------------- /preview/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MMTHDs/payload-theme-dark-rabbit/HEAD/preview/4.png -------------------------------------------------------------------------------- /themes/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MMTHDs/payload-theme-dark-rabbit/HEAD/themes/.DS_Store -------------------------------------------------------------------------------- /themes/dark-rabbit/_theme.scss: -------------------------------------------------------------------------------- 1 | @import '~@fontsource-variable/inter/index.css'; 2 | 3 | button { 4 | font-family: var(--font-body); 5 | } 6 | -------------------------------------------------------------------------------- /themes/dark-rabbit/scss/svg.scss: -------------------------------------------------------------------------------- 1 | @mixin color-svg($color) { 2 | .stroke { 3 | stroke: $color; 4 | fill: none; 5 | } 6 | 7 | .fill { 8 | fill: $color; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /themes/dark-rabbit/compnents/elements/Nav/NavToggler/index.scss: -------------------------------------------------------------------------------- 1 | .nav-toggler { 2 | position: relative; 3 | background: transparent; 4 | padding: 0; 5 | margin: 0; 6 | border: 0; 7 | cursor: pointer; 8 | } 9 | -------------------------------------------------------------------------------- /themes/dark-rabbit/scss/z-index.scss: -------------------------------------------------------------------------------- 1 | ///////////////////////////// 2 | // Z-INDEX CHART (DEPRECATED. DO NOT USE. PREFER CSS VARIABLES) 3 | ///////////////////////////// 4 | 5 | $z-page: 20; 6 | $z-page-content: 30; 7 | $z-nav: 40; 8 | $z-modal: 50; 9 | $z-status: 60; 10 | -------------------------------------------------------------------------------- /themes/dark-rabbit/compnents/forms/field-types/Collapsible/index.scss: -------------------------------------------------------------------------------- 1 | .collapsible-field { 2 | &__row-label-wrap { 3 | pointer-events: none; 4 | display: flex; 5 | align-items: center; 6 | gap: base(0.5); 7 | } 8 | 9 | &--has-error { 10 | border: 1px solid var(--theme-error-500); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /themes/dark-rabbit/scss/resets.scss: -------------------------------------------------------------------------------- 1 | %btn-reset { 2 | border: 0; 3 | background: none; 4 | box-shadow: none; 5 | border-radius: 0; 6 | padding: 0; 7 | color: currentColor; 8 | } 9 | 10 | @mixin btn-reset { 11 | border: 0; 12 | background: none; 13 | box-shadow: none; 14 | border-radius: 0; 15 | padding: 0; 16 | color: currentColor; 17 | } 18 | -------------------------------------------------------------------------------- /themes/dark-rabbit/compnents/elements/ReactSelect/MultiValue/index.scss: -------------------------------------------------------------------------------- 1 | .multi-value { 2 | &.rs__multi-value { 3 | padding: 0; 4 | background: var(--theme-elevation-150); 5 | border: none; 6 | line-height: calc(#{$baseline} - #{$style-stroke-width-s * 2}); 7 | margin: base(0.25) base(0.5) base(0.25) 0; 8 | } 9 | 10 | &--is-dragging { 11 | z-index: 2; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /themes/dark-rabbit/compnents/views/Account/index.scss: -------------------------------------------------------------------------------- 1 | .account { 2 | &__auth { 3 | margin-bottom: calc(var(--base) * 2); 4 | margin-top: calc(var(--base) * 0.5); 5 | } 6 | 7 | &___settings { 8 | margin-bottom: calc(var(--base) * 2); 9 | } 10 | 11 | @include small-break { 12 | &__auth { 13 | margin-top: 0; 14 | margin-bottom: var(--base); 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /themes/dark-rabbit/compnents/forms/field-types/Select/index.scss: -------------------------------------------------------------------------------- 1 | .field-type.select { 2 | position: relative; 3 | } 4 | 5 | html[data-theme='light'] { 6 | .field-type.select { 7 | &.error { 8 | .rs__control { 9 | @include lightInputError; 10 | } 11 | } 12 | } 13 | } 14 | 15 | html[data-theme='dark'] { 16 | .field-type.select { 17 | &.error { 18 | .rs__control { 19 | @include darkInputError; 20 | } 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /themes/dark-rabbit/compnents/forms/field-types/Password/index.scss: -------------------------------------------------------------------------------- 1 | .field-type.password { 2 | position: relative; 3 | 4 | input { 5 | @include formInput; 6 | } 7 | } 8 | 9 | html[data-theme='light'] { 10 | .field-type.password { 11 | &.error { 12 | input { 13 | @include lightInputError; 14 | } 15 | } 16 | } 17 | } 18 | 19 | html[data-theme='dark'] { 20 | .field-type.password { 21 | &.error { 22 | input { 23 | @include darkInputError; 24 | } 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /themes/dark-rabbit/compnents/forms/Label/index.scss: -------------------------------------------------------------------------------- 1 | label.field-label { 2 | @extend %body; 3 | display: flex; 4 | padding-bottom: base(0.25); 5 | color: var(--theme-elevation-800); 6 | font-family: var(--font-body); 7 | font-size: 16px; 8 | font-weight: 600; 9 | 10 | .required { 11 | color: var(--theme-error-500); 12 | [dir='ltr'] & { 13 | margin-left: base(0.25); 14 | margin-right: auto; 15 | } 16 | [dir='rtl'] & { 17 | margin-right: base(0.25); 18 | margin-left: auto; 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /themes/dark-rabbit/compnents/forms/field-types/Text/index.scss: -------------------------------------------------------------------------------- 1 | .field-type.text { 2 | position: relative; 3 | 4 | &:not(.has-many) { 5 | input { 6 | @include formInput; 7 | } 8 | } 9 | } 10 | 11 | html[data-theme='light'] { 12 | .field-type.text { 13 | &.error { 14 | input { 15 | @include lightInputError; 16 | } 17 | } 18 | } 19 | } 20 | 21 | html[data-theme='dark'] { 22 | .field-type.text { 23 | &.error { 24 | input { 25 | @include darkInputError; 26 | } 27 | } 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /themes/dark-rabbit/compnents/forms/field-types/Number/index.scss: -------------------------------------------------------------------------------- 1 | .field-type.number { 2 | position: relative; 3 | 4 | &:not(.has-many) { 5 | input { 6 | @include formInput; 7 | } 8 | } 9 | } 10 | 11 | html[data-theme='light'] { 12 | .field-type.number { 13 | &.error { 14 | input { 15 | @include lightInputError; 16 | } 17 | } 18 | } 19 | } 20 | 21 | html[data-theme='dark'] { 22 | .field-type.number { 23 | &.error { 24 | input { 25 | @include darkInputError; 26 | } 27 | } 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /themes/dark-rabbit/scss/queries.scss: -------------------------------------------------------------------------------- 1 | //////////////////////////// 2 | // MEDIA QUERIES 3 | ///////////////////////////// 4 | 5 | @mixin extra-small-break { 6 | @media (max-width: $breakpoint-xs-width) { 7 | @content; 8 | } 9 | } 10 | 11 | @mixin small-break { 12 | @media (max-width: $breakpoint-s-width) { 13 | @content; 14 | } 15 | } 16 | 17 | @mixin mid-break { 18 | @media (max-width: $breakpoint-m-width) { 19 | @content; 20 | } 21 | } 22 | 23 | @mixin large-break { 24 | @media (max-width: $breakpoint-l-width) { 25 | @content; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /themes/dark-rabbit/compnents/forms/field-types/DateTime/index.scss: -------------------------------------------------------------------------------- 1 | .date-time-field { 2 | &__error-wrap { 3 | position: relative; 4 | } 5 | } 6 | 7 | html[data-theme='light'] { 8 | .date-time-field { 9 | &--has-error { 10 | .react-datepicker__input-container input { 11 | @include lightInputError; 12 | } 13 | } 14 | } 15 | } 16 | 17 | html[data-theme='dark'] { 18 | .date-time-field { 19 | &--has-error { 20 | .react-datepicker__input-container input { 21 | @include darkInputError; 22 | } 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /themes/dark-rabbit/compnents/forms/field-types/ConfirmPassword/index.scss: -------------------------------------------------------------------------------- 1 | .field-type.confirm-password { 2 | position: relative; 3 | 4 | input { 5 | @include formInput; 6 | } 7 | } 8 | 9 | html[data-theme='light'] { 10 | .field-type.field-type.confirm-password { 11 | &.error { 12 | input { 13 | @include lightInputError; 14 | } 15 | } 16 | } 17 | } 18 | 19 | html[data-theme='dark'] { 20 | .field-type.field-type.confirm-password { 21 | &.error { 22 | input { 23 | @include darkInputError; 24 | } 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /themes/dark-rabbit/compnents/forms/field-types/Relationship/AddNew/index.scss: -------------------------------------------------------------------------------- 1 | .relationship-add-new { 2 | display: flex; 3 | align-items: stretch; 4 | 5 | .popup__trigger-wrap { 6 | display: flex; 7 | align-items: stretch; 8 | height: 100%; 9 | } 10 | 11 | &__add-button, 12 | &__add-button.doc-drawer__toggler { 13 | @include formInput; 14 | position: relative; 15 | height: 100%; 16 | margin-left: -1px; 17 | display: flex; 18 | padding: 0 base(0.5); 19 | align-items: center; 20 | display: flex; 21 | cursor: pointer; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /themes/dark-rabbit/compnents/forms/field-types/Email/index.scss: -------------------------------------------------------------------------------- 1 | .field-type.email { 2 | position: relative; 3 | 4 | input { 5 | @include formInput; 6 | } 7 | 8 | &.error { 9 | input { 10 | background-color: var(--theme-error-200); 11 | } 12 | } 13 | } 14 | 15 | html[data-theme='light'] { 16 | .field-type.email { 17 | &.error { 18 | input { 19 | @include lightInputError; 20 | } 21 | } 22 | } 23 | } 24 | 25 | html[data-theme='dark'] { 26 | .field-type.email { 27 | &.error { 28 | input { 29 | @include darkInputError; 30 | } 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /themes/dark-rabbit/compnents/forms/field-types/JSON/index.scss: -------------------------------------------------------------------------------- 1 | .json-field { 2 | position: relative; 3 | } 4 | 5 | html[data-theme='light'] { 6 | .json-field { 7 | &.error { 8 | .code-editor { 9 | border-color: var(--theme-error-500); 10 | } 11 | 12 | .monaco-editor-background, 13 | .margin { 14 | background-color: var(--theme-error-50); 15 | } 16 | } 17 | } 18 | } 19 | 20 | html[data-theme='dark'] { 21 | .json-field { 22 | &.error { 23 | .code-editor { 24 | border-color: var(--theme-error-500); 25 | } 26 | 27 | .monaco-editor-background, 28 | .margin { 29 | background-color: var(--theme-error-100); 30 | } 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /themes/dark-rabbit/compnents/forms/field-types/Code/index.scss: -------------------------------------------------------------------------------- 1 | .code-field { 2 | position: relative; 3 | 4 | &.error { 5 | textarea { 6 | border: 1px solid var(--theme-error-500) !important; 7 | } 8 | .code-editor { 9 | border-color: var(--theme-error-500); 10 | } 11 | } 12 | } 13 | 14 | html[data-theme='light'] { 15 | .code-field { 16 | &.error { 17 | .monaco-editor-background, 18 | .margin { 19 | background-color: var(--theme-error-50); 20 | } 21 | } 22 | } 23 | } 24 | 25 | html[data-theme='dark'] { 26 | .code-field { 27 | &.error { 28 | .monaco-editor-background, 29 | .margin { 30 | background-color: var(--theme-error-100); 31 | } 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /themes/dark-rabbit/_theme-vars.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | /** 3 | * Color 4 | */ 5 | --dr-project-color: #2ecc56; 6 | 7 | /** 8 | * Color Mix 9 | */ 10 | --dr--primary: var(--dr-project-color); 11 | --dr--primary-background: color-mix(in srgb, var(--theme-elevation-0), var(--dr--primary) 10%); 12 | --dr--primary-subdued: color-mix(in srgb, var(--theme-elevation-0), var(--dr--primary) 50%); 13 | --dr--primary-accent: color-mix(in srgb, var(--dr--primary), #16151a 25%); 14 | 15 | /** 16 | * Transitions 17 | */ 18 | --dr-transition: cubic-bezier(0.4, 0, 0.2, 1); 19 | --dr-transition-in: cubic-bezier(0, 0, 0.2, 1); 20 | --dr-transition-out: cubic-bezier(0.4, 0, 1, 1); 21 | --dr-fast: 125ms; 22 | --dr-medium: 200ms; 23 | --dr-slow: 300ms; 24 | } 25 | -------------------------------------------------------------------------------- /themes/dark-rabbit/compnents/elements/ColumnSelector/index.scss: -------------------------------------------------------------------------------- 1 | .column-selector { 2 | display: flex; 3 | flex-wrap: wrap; 4 | background: var(--theme-elevation-50); 5 | padding: base(1) base(1) base(0.5); 6 | border-radius: var(--style-radius-m); 7 | 8 | &__column { 9 | margin-right: base(0.5); 10 | margin-bottom: base(0.5); 11 | background-color: transparent; 12 | box-shadow: none; 13 | 14 | &.column-selector__column--active { 15 | background-color: var(--theme-elevation-250); 16 | } 17 | } 18 | 19 | // TODO: delete this once all icons have been migrated to viewbox edge-to-edge 20 | .pill__icon { 21 | padding: 0; 22 | } 23 | 24 | @include small-break { 25 | padding: calc(var(--base) / 2) calc(var(--base) / 2) 0; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /themes/dark-rabbit/compnents/elements/SearchFilter/index.scss: -------------------------------------------------------------------------------- 1 | [dir='rtl'] .search-filter { 2 | svg { 3 | right: base(0.5); 4 | left: 0; 5 | } 6 | &__input { 7 | padding-right: base(2); 8 | padding-left: 0; 9 | } 10 | } 11 | .search-filter { 12 | position: relative; 13 | 14 | svg { 15 | position: absolute; 16 | top: 50%; 17 | transform: translateY(-50%); 18 | left: base(0.5); 19 | } 20 | 21 | &__input { 22 | @include formInput; 23 | box-shadow: none; 24 | padding-left: base(2); 25 | background-color: var(--theme-elevation-50); 26 | border: none; 27 | border-radius: var(--style-radius-m); 28 | 29 | &:not(:disabled) { 30 | &:hover, 31 | &:focus { 32 | box-shadow: none; 33 | } 34 | } 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /themes/dark-rabbit/compnents/forms/field-types/Point/index.scss: -------------------------------------------------------------------------------- 1 | .point { 2 | position: relative; 3 | 4 | &__wrap { 5 | display: flex; 6 | width: calc(100% + #{base(1)}); 7 | margin: 0; 8 | margin-left: base(-0.5); 9 | margin-right: base(-0.5); 10 | list-style: none; 11 | padding: 0; 12 | 13 | li { 14 | padding: 0 base(0.5); 15 | width: 50%; 16 | } 17 | } 18 | 19 | input { 20 | @include formInput; 21 | } 22 | } 23 | 24 | html[data-theme='light'] { 25 | .point { 26 | &.error { 27 | input { 28 | @include lightInputError; 29 | } 30 | } 31 | } 32 | } 33 | 34 | html[data-theme='dark'] { 35 | .point { 36 | &.error { 37 | input { 38 | @include darkInputError; 39 | } 40 | } 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /themes/dark-rabbit/compnents/forms/field-types/Blocks/BlocksDrawer/BlockSearch/index.scss: -------------------------------------------------------------------------------- 1 | $icon-width: base(1); 2 | $icon-margin: base(0.25); 3 | 4 | .block-search { 5 | position: sticky; 6 | top: 0; 7 | display: flex; 8 | width: 100%; 9 | align-items: center; 10 | z-index: 1; 11 | 12 | &__input { 13 | @include formInput; 14 | padding-right: calc(#{$icon-width} + #{$icon-margin} * 2); 15 | } 16 | 17 | .search { 18 | position: absolute; 19 | top: 50%; 20 | transform: translate3d(0, -50%, 0); 21 | right: base(0.25); 22 | width: $icon-width; 23 | margin: 0 $icon-margin; 24 | 25 | .stroke { 26 | stroke: var(--theme-elevation-300); 27 | } 28 | } 29 | 30 | @include mid-break { 31 | &__input { 32 | margin-bottom: 0; 33 | } 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /themes/dark-rabbit/compnents/forms/field-types/Row/index.scss: -------------------------------------------------------------------------------- 1 | .field-type.row { 2 | .row__fields { 3 | display: flex; 4 | flex-wrap: wrap; 5 | width: calc(100% + var(--base)); 6 | margin-left: calc(var(--base) * -0.5); 7 | margin-right: calc(var(--base) * -0.5); 8 | 9 | > * { 10 | flex-grow: 1; 11 | padding-left: calc(var(--base) * 0.5); 12 | padding-right: calc(var(--base) * 0.5); 13 | } 14 | } 15 | 16 | @include mid-break { 17 | .row__fields { 18 | display: block; 19 | margin-left: 0; 20 | margin-right: 0; 21 | width: 100%; 22 | 23 | > * { 24 | margin-left: 0; 25 | margin-right: 0; 26 | width: 100% !important; 27 | padding-left: 0; 28 | padding-right: 0; 29 | } 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /themes/dark-rabbit/compnents/forms/field-types/Relationship/select-components/MultiValueLabel/index.scss: -------------------------------------------------------------------------------- 1 | .relationship--multi-value-label { 2 | display: flex; 3 | 4 | &__content { 5 | @extend %small; 6 | padding: 0 base(0.125) 0 base(0.25); 7 | max-width: 150px; 8 | color: currentColor; 9 | display: flex; 10 | align-items: center; 11 | } 12 | 13 | &__text { 14 | text-overflow: ellipsis; 15 | overflow: hidden; 16 | white-space: nowrap; 17 | } 18 | 19 | &__drawer-toggler { 20 | position: relative; 21 | display: flex; 22 | align-items: center; 23 | justify-content: center; 24 | margin-left: base(0.25); 25 | pointer-events: all; 26 | 27 | .icon { 28 | width: base(0.75); 29 | height: base(0.75); 30 | } 31 | 32 | &:hover { 33 | background-color: var(--theme-elevation-100); 34 | } 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /themes/dark-rabbit/compnents/elements/Table/index.scss: -------------------------------------------------------------------------------- 1 | .table { 2 | margin-bottom: $baseline; 3 | overflow: auto; 4 | max-width: 100%; 5 | 6 | thead { 7 | color: var(--theme-elevation-800); 8 | 9 | th { 10 | font-weight: 600; 11 | text-align: left; 12 | [dir='rtl'] & { 13 | text-align: right; 14 | } 15 | } 16 | } 17 | 18 | th, 19 | td { 20 | padding: base(0.75); 21 | min-width: 150px; 22 | border-bottom: 2px solid var(--theme-elevation-50); 23 | } 24 | 25 | tbody { 26 | tr { 27 | &:nth-child(odd) { 28 | background: transparent; 29 | } 30 | } 31 | } 32 | 33 | a:focus-visible { 34 | outline: var(--accessibility-outline); 35 | outline-offset: var(--accessibility-outline-offset); 36 | } 37 | 38 | @include mid-break { 39 | th, 40 | td { 41 | max-width: 70vw; 42 | } 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /themes/dark-rabbit/compnents/elements/WhereBuilder/index.scss: -------------------------------------------------------------------------------- 1 | .where-builder { 2 | background: var(--theme-elevation-50); 3 | padding: var(--base); 4 | display: flex; 5 | flex-direction: column; 6 | gap: calc(var(--base) / 2); 7 | border-radius: var(--style-radius-m); 8 | 9 | .btn { 10 | margin: 0; 11 | align-self: flex-start; 12 | } 13 | 14 | &__no-filters { 15 | display: flex; 16 | flex-direction: column; 17 | gap: calc(var(--base) / 2); 18 | } 19 | 20 | &__or-filters, 21 | &__and-filters { 22 | list-style: none; 23 | margin: 0; 24 | padding: 0; 25 | display: flex; 26 | flex-direction: column; 27 | gap: calc(var(--base) / 2); 28 | 29 | li { 30 | display: flex; 31 | flex-direction: column; 32 | gap: calc(var(--base) / 2); 33 | } 34 | } 35 | 36 | @include small-break { 37 | padding: calc(var(--base) / 2); 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /themes/dark-rabbit/compnents/elements/Thumbnail/index.scss: -------------------------------------------------------------------------------- 1 | .thumbnail { 2 | min-height: 100%; 3 | flex-shrink: 0; 4 | align-self: stretch; 5 | overflow: hidden; 6 | border-radius: var(--style-radius-m); 7 | 8 | img, 9 | svg { 10 | width: 100%; 11 | height: 100%; 12 | object-fit: cover; 13 | } 14 | 15 | &--size-expand { 16 | max-height: 100%; 17 | width: 100%; 18 | padding-top: 100%; 19 | position: relative; 20 | 21 | img, 22 | svg { 23 | position: absolute; 24 | top: 0; 25 | } 26 | } 27 | 28 | &--size-large { 29 | max-height: base(9); 30 | width: base(9); 31 | } 32 | 33 | &--size-medium { 34 | max-height: base(7); 35 | width: base(7); 36 | } 37 | 38 | &--size-small { 39 | max-height: base(5); 40 | width: base(5); 41 | } 42 | 43 | @include large-break { 44 | .thumbnail { 45 | width: base(5); 46 | } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /themes/dark-rabbit/compnents/forms/field-types/RadioGroup/index.scss: -------------------------------------------------------------------------------- 1 | .radio-group { 2 | &__error-wrap { 3 | position: relative; 4 | } 5 | 6 | &--layout-horizontal { 7 | ul { 8 | display: flex; 9 | flex-wrap: wrap; 10 | } 11 | 12 | li { 13 | flex-shrink: 0; 14 | [dir='ltr'] & { 15 | padding-right: $baseline; 16 | } 17 | [dir='rtl'] & { 18 | padding-left: $baseline; 19 | } 20 | } 21 | } 22 | 23 | ul { 24 | list-style: none; 25 | padding: 0; 26 | margin: 0; 27 | } 28 | } 29 | 30 | html[data-theme='light'] { 31 | .radio-group { 32 | &.error { 33 | .radio-input__styled-radio { 34 | @include lightInputError; 35 | } 36 | } 37 | } 38 | } 39 | 40 | html[data-theme='dark'] { 41 | .radio-group { 42 | &.error { 43 | .radio-input__styled-radio { 44 | @include darkInputError; 45 | } 46 | } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /themes/dark-rabbit/compnents/forms/field-types/Relationship/select-components/SingleValue/index.scss: -------------------------------------------------------------------------------- 1 | .relationship--single-value { 2 | &.rs__single-value { 3 | overflow: visible; 4 | min-width: 0; 5 | } 6 | 7 | &__label-text { 8 | max-width: unset; 9 | display: flex; 10 | align-items: center; 11 | overflow: visible; 12 | width: 100%; 13 | flex-shrink: 1; 14 | } 15 | 16 | &__text { 17 | overflow: hidden; 18 | text-overflow: ellipsis; 19 | } 20 | 21 | &__drawer-toggler { 22 | position: relative; 23 | display: inline-flex; 24 | align-items: center; 25 | justify-content: center; 26 | margin-left: base(0.25); 27 | pointer-events: all; 28 | 29 | .icon { 30 | width: base(0.75); 31 | height: base(0.75); 32 | } 33 | 34 | &:focus { 35 | outline: none; 36 | } 37 | 38 | &:hover { 39 | background-color: var(--theme-elevation-100); 40 | } 41 | } 42 | 43 | &__label { 44 | flex-grow: 1; 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /themes/dark-rabbit/compnents/forms/field-types/Blocks/BlocksDrawer/index.scss: -------------------------------------------------------------------------------- 1 | .blocks-drawer { 2 | &__blocks-wrapper { 3 | padding-top: base(1.5); 4 | } 5 | 6 | &__blocks { 7 | position: relative; 8 | padding: 0; 9 | list-style: none; 10 | display: grid; 11 | grid-template-columns: repeat(6, 1fr); 12 | gap: base(1); 13 | } 14 | 15 | &__default-image { 16 | width: 100%; 17 | overflow: hidden; 18 | padding-top: base(0.75); 19 | } 20 | 21 | @include large-break { 22 | &__blocks { 23 | grid-template-columns: repeat(5, 1fr); 24 | } 25 | } 26 | 27 | @include mid-break { 28 | &__blocks-wrapper { 29 | padding-top: base(1.75); 30 | } 31 | &__blocks { 32 | grid-template-columns: repeat(3, 1fr); 33 | gap: base(0.5); 34 | } 35 | } 36 | 37 | @include small-break { 38 | &__blocks-wrapper { 39 | padding-top: base(0.75); 40 | } 41 | 42 | &__blocks { 43 | grid-template-columns: repeat(2, 1fr); 44 | } 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /themes/dark-rabbit/compnents/forms/field-types/Blocks/SectionTitle/index.scss: -------------------------------------------------------------------------------- 1 | .section-title { 2 | position: relative; 3 | min-width: 0; 4 | 5 | &:after { 6 | display: block; 7 | content: attr(data-value) ' '; 8 | visibility: hidden; 9 | white-space: nowrap; 10 | min-width: base(2.5); 11 | } 12 | 13 | &:after, 14 | &__input { 15 | font-family: var(--font-body); 16 | font-weight: 600; 17 | font-size: base(0.625); 18 | padding: 0; 19 | } 20 | 21 | &__input { 22 | color: var(--theme-elevation-800); 23 | background-color: transparent; 24 | border: none; 25 | width: 100%; 26 | text-overflow: ellipsis; 27 | resize: none; 28 | appearance: none; 29 | position: absolute; 30 | top: 0; 31 | right: 0; 32 | bottom: 0; 33 | left: 0; 34 | 35 | &:hover { 36 | box-shadow: inset 0px -2px 0px -1px var(--theme-elevation-150); 37 | } 38 | 39 | &:hover, 40 | &:focus { 41 | outline: 0; 42 | } 43 | 44 | &:focus { 45 | box-shadow: none; 46 | } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /themes/dark-rabbit/compnents/views/Dashboard/index.scss: -------------------------------------------------------------------------------- 1 | .dashboard { 2 | width: 100%; 3 | --gap: var(--base); 4 | --cols: 5; 5 | 6 | &__wrap { 7 | padding-bottom: var(--spacing-view-bottom); 8 | display: flex; 9 | flex-direction: column; 10 | gap: var(--base); 11 | } 12 | 13 | &__group { 14 | display: flex; 15 | flex-direction: column; 16 | gap: var(--gap); 17 | } 18 | 19 | &__label { 20 | margin: 0; 21 | } 22 | 23 | &__card-list { 24 | padding: 0; 25 | margin: 0; 26 | list-style: none; 27 | display: flex; 28 | gap: var(--gap); 29 | flex-wrap: wrap; 30 | 31 | li { 32 | width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1)); 33 | } 34 | 35 | .card { 36 | height: 100%; 37 | border-radius: var(--style-radius-m); 38 | } 39 | } 40 | 41 | @include large-break { 42 | --cols: 4; 43 | } 44 | 45 | @include mid-break { 46 | --gap: var(--base); 47 | --cols: 2; 48 | } 49 | 50 | @include small-break { 51 | --cols: 1; 52 | 53 | &__wrap { 54 | gap: var(--base); 55 | } 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /themes/dark-rabbit/compnents/elements/Paginator/index.scss: -------------------------------------------------------------------------------- 1 | .paginator { 2 | display: flex; 3 | margin-bottom: $baseline; 4 | 5 | &__page { 6 | cursor: pointer; 7 | border-radius: var(--style-radius-m); 8 | 9 | &--is-current { 10 | background: var(--theme-elevation-100); 11 | color: var(--theme-elevation-400); 12 | cursor: default; 13 | } 14 | 15 | &--is-last-page { 16 | margin-right: 0; 17 | } 18 | } 19 | 20 | .clickable-arrow--right { 21 | margin-right: base(0.25); 22 | } 23 | 24 | &__page { 25 | @extend %btn-reset; 26 | width: base(2); 27 | height: base(2); 28 | display: flex; 29 | justify-content: center; 30 | align-content: center; 31 | outline: 0; 32 | padding: base(0.5); 33 | color: var(--theme-elevation-800); 34 | line-height: base(1); 35 | 36 | &:focus-visible { 37 | outline: var(--accessibility-outline); 38 | } 39 | } 40 | 41 | &__page, 42 | &__separator { 43 | margin-right: base(0.25); 44 | } 45 | 46 | &__separator { 47 | align-self: center; 48 | color: var(--theme-elevation-400); 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /themes/dark-rabbit/compnents/elements/Card/index.scss: -------------------------------------------------------------------------------- 1 | .card { 2 | background: var(--theme-elevation-50); 3 | padding: base(1.25) $baseline; 4 | position: relative; 5 | 6 | &__title { 7 | @extend %h5; 8 | white-space: nowrap; 9 | overflow: hidden; 10 | text-overflow: ellipsis; 11 | } 12 | 13 | &__actions { 14 | position: relative; 15 | z-index: 2; 16 | margin-top: base(0.5); 17 | display: inline-flex; 18 | 19 | .btn { 20 | margin: 0; 21 | color: var(--dr--primary); 22 | 23 | &:hover { 24 | background: var(--dr--primary); 25 | 26 | & .btn__icon { 27 | background: var(--dr--primary); 28 | } 29 | } 30 | 31 | & .btn__icon { 32 | &:hover { 33 | background: var(--dr--primary); 34 | } 35 | } 36 | } 37 | } 38 | 39 | &--has-onclick { 40 | cursor: pointer; 41 | 42 | &:hover { 43 | background: var(--theme-elevation-100); 44 | } 45 | } 46 | 47 | &__click { 48 | position: absolute; 49 | z-index: 1; 50 | top: 0; 51 | left: 0; 52 | width: 100%; 53 | height: 100%; 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /themes/dark-rabbit/compnents/elements/DocumentHeader/index.scss: -------------------------------------------------------------------------------- 1 | .doc-header { 2 | width: 100%; 3 | margin-top: base(0.5); 4 | padding-bottom: calc(var(--base) * 1.5); 5 | display: flex; 6 | align-items: center; 7 | position: relative; 8 | display: flex; 9 | gap: calc(var(--base) / 2); 10 | 11 | &::after { 12 | content: ''; 13 | display: block; 14 | position: absolute; 15 | height: 2px; 16 | background: var(--theme-elevation-100); 17 | width: 100%; 18 | left: 0; 19 | top: calc(100% - 2px); 20 | } 21 | 22 | &__title { 23 | flex-grow: 1; 24 | white-space: nowrap; 25 | overflow: hidden; 26 | text-overflow: ellipsis; 27 | margin: 0; 28 | } 29 | 30 | @include mid-break { 31 | padding-left: 0; 32 | padding-right: 0; 33 | margin-top: base(0.25); 34 | padding-bottom: calc(var(--base) / 1.5); 35 | flex-direction: column; 36 | gap: calc(var(--base) / 2); 37 | padding-bottom: calc(var(--base) / 2); 38 | 39 | &__title { 40 | width: 100%; 41 | padding-left: var(--gutter-h); 42 | padding-right: var(--gutter-h); 43 | } 44 | } 45 | 46 | @include small-break { 47 | margin-top: 0; 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /themes/dark-rabbit/compnents/views/collections/Edit/Auth/index.scss: -------------------------------------------------------------------------------- 1 | .auth-fields { 2 | padding: base(2); 3 | background: var(--theme-elevation-50); 4 | display: flex; 5 | flex-direction: column; 6 | gap: var(--base); 7 | border-radius: var(--style-radius-l); 8 | 9 | &__controls { 10 | display: flex; 11 | align-items: center; 12 | gap: calc(var(--base) / 2); 13 | flex-wrap: wrap; 14 | } 15 | 16 | &__changing-password { 17 | display: flex; 18 | flex-direction: column; 19 | gap: var(--base); 20 | } 21 | 22 | .btn { 23 | margin: 0; 24 | } 25 | 26 | &__api-key-label { 27 | position: relative; 28 | } 29 | 30 | @include mid-break { 31 | padding: var(--base); 32 | gap: calc(var(--base) / 2); 33 | 34 | &__changing-password { 35 | gap: calc(var(--base) / 2); 36 | } 37 | } 38 | } 39 | 40 | .field-type.api-key { 41 | margin-bottom: $baseline; 42 | 43 | input { 44 | @include formInput; 45 | } 46 | } 47 | 48 | @keyframes highlight { 49 | 0% { 50 | background: var(--theme-success-500); 51 | } 52 | 53 | 100% { 54 | background: none; 55 | } 56 | } 57 | 58 | .highlight { 59 | animation: highlight 10s; 60 | } 61 | -------------------------------------------------------------------------------- /themes/dark-rabbit/compnents/forms/field-types/Relationship/index.scss: -------------------------------------------------------------------------------- 1 | .field-type.relationship { 2 | position: relative; 3 | } 4 | 5 | .relationship { 6 | &__wrap { 7 | display: flex; 8 | width: 100%; 9 | 10 | div.react-select { 11 | width: calc(100% - 8px); 12 | min-width: 0; 13 | margin-right: 8px; 14 | } 15 | } 16 | 17 | &__error-loading { 18 | border: 1px solid var(--theme-error-500); 19 | min-height: base(2); 20 | padding: base(0.5) base(0.75); 21 | background-color: var(--theme-error-500); 22 | color: var(--theme-elevation-0); 23 | } 24 | } 25 | 26 | html[data-theme='light'] { 27 | .relationship { 28 | &.error { 29 | > .relationship__wrap { 30 | .rs__control { 31 | @include lightInputError; 32 | } 33 | } 34 | 35 | button { 36 | @include lightInputError; 37 | } 38 | } 39 | } 40 | } 41 | 42 | html[data-theme='dark'] { 43 | .relationship { 44 | &.error { 45 | > .relationship__wrap { 46 | .rs__control { 47 | @include darkInputError; 48 | } 49 | } 50 | 51 | button { 52 | @include darkInputError; 53 | } 54 | } 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /themes/dark-rabbit/compnents/elements/DocumentHeader/Tabs/index.scss: -------------------------------------------------------------------------------- 1 | .doc-tabs { 2 | display: flex; 3 | 4 | &__tabs { 5 | display: flex; 6 | gap: calc(var(--base) / 2); 7 | list-style: none; 8 | align-items: center; 9 | margin: 0; 10 | padding-left: 0; 11 | } 12 | 13 | @include mid-break { 14 | width: 100%; 15 | padding: 0; 16 | overflow: auto; 17 | 18 | // this container has a gradient overlay as visual indication of `overflow: scroll` 19 | &::-webkit-scrollbar { 20 | display: none; 21 | } 22 | 23 | &::after { 24 | content: ''; 25 | display: block; 26 | position: sticky; 27 | right: 0; 28 | width: calc(var(--base) * 2); 29 | height: calc(var(--base) * 2); 30 | background: linear-gradient(to right, transparent, var(--theme-bg)); 31 | flex-shrink: 0; 32 | z-index: 1111; 33 | pointer-events: none; 34 | } 35 | 36 | &__tabs { 37 | padding: 0; 38 | margin-left: var(--gutter-h); 39 | } 40 | } 41 | 42 | @include small-break { 43 | &__tabs-container { 44 | margin-right: var(--gutter-h); 45 | } 46 | 47 | &__tabs { 48 | gap: var(--gutter-h); 49 | } 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Dark Rabbit Theme for PayloadCMS 2 | 3 | The theme is an initial design to make the PayloadCMS UI more visually pleasing. It's not complete and may not be implemented cleanly in some areas. If anyone is interested, it can be further developed. It supports both light and dark modes, as it largely builds upon the pre-defined theme in Payload and CSS only at the moment for. 4 | 5 | Tested with Payload 2 6 | 7 | ## How to use 8 | 9 | 1. Clone or download the theme, then add it to your Payload source directory, typically under a folder named themes. 10 | 2. Adjust your payload.config.ts as follows: 11 | 12 | ```ts 13 | export default buildConfig({ 14 | ... 15 | admin: { 16 | css: path.resolve(__dirname, 'themes/dark-rabbit/index.scss'), 17 | ... 18 | } 19 | ... 20 | }); 21 | ``` 22 | 23 | 3. Modify the project color variable `--dr-project-color` in the `_theme-vars.scss` file as required. 24 | 4. Install font 25 | 26 | ```sh 27 | npm i @fontsource-variable/inter 28 | ``` 29 | 5. Feel free to modify the theme if you want 30 | 31 | ## Preview 32 | 33 | ### Light Mode 34 | 35 | ![3](preview/3.png?raw=true "3") 36 | ![1](preview/1.png?raw=true "1") 37 | 38 | ### Dark Mode 39 | 40 | ![4](preview/4.png?raw=true "4") 41 | ![2](preview/2.png?raw=true "2") 42 | -------------------------------------------------------------------------------- /themes/dark-rabbit/scss/toastify.scss: -------------------------------------------------------------------------------- 1 | @import 'vars'; 2 | @import '~react-toastify/dist/ReactToastify.css'; 3 | 4 | .Toastify { 5 | .Toastify__toast-container { 6 | left: base(5); 7 | transform: none; 8 | right: base(5); 9 | width: auto; 10 | } 11 | 12 | .Toastify__toast { 13 | padding: base(0.5); 14 | border-radius: $style-radius-m; 15 | font-weight: 600; 16 | } 17 | 18 | .Toastify__close-button { 19 | align-self: center; 20 | opacity: 0.7; 21 | 22 | &:hover { 23 | opacity: 1; 24 | } 25 | } 26 | 27 | .Toastify__toast--success { 28 | color: var(--color-success-900); 29 | background: var(--color-success-500); 30 | 31 | .Toastify__progress-bar { 32 | background-color: var(--color-success-900); 33 | } 34 | } 35 | 36 | .Toastify__close-button--success { 37 | color: var(--color-success-900); 38 | } 39 | 40 | .Toastify__toast--error { 41 | background: var(--theme-error-500); 42 | color: #fff; 43 | 44 | .Toastify__progress-bar { 45 | background-color: #fff; 46 | } 47 | } 48 | 49 | .Toastify__close-button--light { 50 | color: inherit; 51 | } 52 | 53 | @include mid-break { 54 | .Toastify__toast-container { 55 | left: $baseline; 56 | right: $baseline; 57 | } 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /themes/dark-rabbit/compnents/elements/Popup/PopupButtonList/index.scss: -------------------------------------------------------------------------------- 1 | .popup-button-list { 2 | --list-button-padding: calc(var(--base) * 0.5); 3 | display: flex; 4 | flex-direction: column; 5 | text-align: left; 6 | gap: 3px; 7 | [dir='rtl'] &__text-align--left { 8 | text-align: right; 9 | } 10 | &__text-align--left { 11 | text-align: left; 12 | } 13 | 14 | &__text-align--center { 15 | text-align: center; 16 | } 17 | [dir='rtl'] &__text-align--right { 18 | text-align: left; 19 | } 20 | &__text-align--right { 21 | text-align: right; 22 | } 23 | 24 | &__button { 25 | @extend %btn-reset; 26 | padding-left: var(--list-button-padding); 27 | padding-right: var(--list-button-padding); 28 | padding-top: 2px; 29 | padding-bottom: 2px; 30 | cursor: pointer; 31 | text-align: inherit; 32 | line-height: var(--base); 33 | text-decoration: none; 34 | border-radius: var(--style-radius-m); 35 | 36 | button { 37 | @extend %btn-reset; 38 | 39 | &:focus-visible { 40 | outline: none; 41 | } 42 | } 43 | 44 | &:hover, 45 | &:focus-visible, 46 | &:focus-within { 47 | background-color: var(--popup-button-highlight); 48 | } 49 | } 50 | 51 | &__button--selected { 52 | background-color: var(--theme-elevation-150); 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /themes/dark-rabbit/compnents/forms/field-types/Upload/index.scss: -------------------------------------------------------------------------------- 1 | .upload { 2 | position: relative; 3 | max-width: 100%; 4 | 5 | &__wrap { 6 | background: var(--theme-elevation-50); 7 | padding: base(1); 8 | } 9 | 10 | &__buttons { 11 | margin: base(-0.25); 12 | width: calc(100% + #{base(0.5)}); 13 | flex-wrap: wrap; 14 | display: flex; 15 | align-items: center; 16 | gap: base(0.25); 17 | 18 | .btn { 19 | margin: 0; 20 | } 21 | } 22 | 23 | &__toggler { 24 | min-width: base(7); 25 | } 26 | 27 | @include mid-break { 28 | &__wrap { 29 | padding: base(0.75); 30 | } 31 | 32 | &__toggler { 33 | width: calc(100% - #{base(0.5)}); 34 | } 35 | } 36 | } 37 | 38 | html[data-theme='light'] { 39 | .upload { 40 | &.error { 41 | .upload__wrap { 42 | @include lightInputError; 43 | } 44 | 45 | .btn--style-secondary { 46 | background-color: var(--theme-error-100); 47 | box-shadow: inset 0 0 0 1px var(--theme-error-500); 48 | } 49 | } 50 | } 51 | } 52 | 53 | html[data-theme='dark'] { 54 | .upload { 55 | &.error { 56 | .upload__wrap { 57 | @include darkInputError; 58 | } 59 | 60 | .btn--style-secondary { 61 | background-color: var(--theme-error-150); 62 | box-shadow: inset 0 0 0 1px var(--theme-error-500); 63 | } 64 | } 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /themes/dark-rabbit/compnents/elements/ListControls/index.scss: -------------------------------------------------------------------------------- 1 | .list-controls { 2 | &__wrap { 3 | display: flex; 4 | align-items: center; 5 | background-color: var(--theme-elevation-50); 6 | border-radius: var(--style-radius-m); 7 | overflow: hidden; 8 | } 9 | 10 | .search-filter { 11 | flex-grow: 1; 12 | 13 | input { 14 | margin: 0; 15 | } 16 | } 17 | 18 | &__buttons-wrap { 19 | display: flex; 20 | align-items: center; 21 | gap: base(0.5); 22 | 23 | [dir='ltr'] & { 24 | margin-right: base(0.5); 25 | } 26 | 27 | [dir='rtl'] & { 28 | margin-left: base(0.5); 29 | } 30 | 31 | .pill { 32 | background-color: var(--theme-elevation-200); 33 | 34 | &:hover { 35 | background-color: var(--theme-elevation-150); 36 | } 37 | } 38 | } 39 | 40 | &__buttons-active { 41 | svg { 42 | transform: rotate(180deg); 43 | } 44 | } 45 | 46 | .column-selector, 47 | .where-builder, 48 | .sort-complex { 49 | margin-top: base(1); 50 | } 51 | 52 | @include small-break { 53 | &__wrap { 54 | flex-wrap: wrap; 55 | background-color: unset; 56 | } 57 | 58 | .search-filter { 59 | margin-bottom: base(0.5); 60 | width: 100%; 61 | } 62 | 63 | &__buttons-wrap { 64 | [dir='ltr'] & { 65 | margin-right: 0; 66 | } 67 | 68 | [dir='rtl'] & { 69 | margin-left: 0; 70 | } 71 | 72 | .pill { 73 | padding: base(0.5) base(1); 74 | 75 | svg { 76 | margin-left: auto; 77 | } 78 | } 79 | } 80 | 81 | &__buttons { 82 | margin: 0; 83 | width: 100%; 84 | } 85 | 86 | .column-selector, 87 | .where-builder, 88 | .sort-complex { 89 | margin-top: calc(var(--base) / 2); 90 | } 91 | 92 | &__toggle-columns, 93 | &__toggle-where, 94 | &__toggle-sort { 95 | flex: 1; 96 | } 97 | } 98 | } 99 | -------------------------------------------------------------------------------- /themes/dark-rabbit/compnents/forms/field-types/RadioGroup/RadioInput/index.scss: -------------------------------------------------------------------------------- 1 | .radio-input { 2 | display: flex; 3 | align-items: center; 4 | cursor: pointer; 5 | margin: base(0.1) 0; 6 | 7 | input[type='radio'] { 8 | opacity: 0; 9 | width: 0; 10 | margin: 0; 11 | } 12 | 13 | input[type='radio']:focus + .radio-input__styled-radio { 14 | box-shadow: 0 0 3px 3px var(--theme-success-400); 15 | } 16 | 17 | &__styled-radio { 18 | @include formInput; 19 | width: $baseline; 20 | height: $baseline; 21 | position: relative; 22 | padding: 0; 23 | display: inline-block; 24 | border-radius: 50%; 25 | 26 | &:before { 27 | content: ' '; 28 | display: block; 29 | border-radius: 100%; 30 | background-color: var(--theme-elevation-800); 31 | width: calc(100% - 10px); 32 | height: calc(100% - 10px); 33 | border: 5px solid var(--theme-elevation-0); 34 | opacity: 0; 35 | } 36 | } 37 | 38 | [dir='rtl'] &__label { 39 | margin-left: 0; 40 | margin-right: base(0.5); 41 | } 42 | 43 | &__label { 44 | margin-left: base(0.5); 45 | } 46 | 47 | &--is-selected { 48 | .radio-input { 49 | &__styled-radio { 50 | &:before { 51 | opacity: 1; 52 | } 53 | } 54 | } 55 | } 56 | 57 | &:not(&--is-selected) { 58 | &:hover { 59 | .radio-input { 60 | &__styled-radio { 61 | border-color: var(--theme-elevation-250); 62 | 63 | &:before { 64 | opacity: 0.2; 65 | } 66 | } 67 | } 68 | } 69 | } 70 | } 71 | 72 | .radio-group--read-only { 73 | .radio-input { 74 | cursor: default; 75 | 76 | &__label { 77 | color: var(--theme-elevation-800); 78 | } 79 | 80 | &--is-selected { 81 | .radio-input__styled-radio { 82 | &:before { 83 | background-color: var(--theme-elevation-800); 84 | } 85 | } 86 | } 87 | 88 | &:not(.radio-input--is-selected) { 89 | &:hover { 90 | .radio-input__styled-radio { 91 | &:before { 92 | opacity: 0; 93 | } 94 | } 95 | } 96 | } 97 | } 98 | } 99 | -------------------------------------------------------------------------------- /themes/dark-rabbit/compnents/elements/ReactSelect/index.scss: -------------------------------------------------------------------------------- 1 | .react-select-container { 2 | width: 100%; 3 | } 4 | 5 | .react-select { 6 | .rs__control { 7 | @include formInput; 8 | height: auto; 9 | padding-top: base(0.25); 10 | padding-bottom: base(0.25); 11 | flex-wrap: nowrap; 12 | border: 2px solid var(--theme-elevation-150); 13 | } 14 | 15 | .rs__indicator { 16 | padding: 0px 4px; 17 | cursor: pointer; 18 | } 19 | 20 | .rs__indicator-separator { 21 | display: none; 22 | } 23 | 24 | .rs__input-container { 25 | color: var(--theme-elevation-1000); 26 | } 27 | 28 | .rs__input { 29 | font-family: var(--font-body); 30 | width: 10px; 31 | } 32 | 33 | .rs__menu { 34 | z-index: 2; 35 | border-radius: var(--style-radius-m); 36 | @include shadow-lg; 37 | background: var(--theme-elevation-100); 38 | border: 2px solid var(--theme-elevation-200); 39 | padding: 8px; 40 | } 41 | 42 | .rs__group-heading { 43 | color: var(--theme-elevation-800); 44 | padding-left: base(0.5); 45 | margin-bottom: base(0.25); 46 | font-weight: 600; 47 | font-size: inherit; 48 | text-transform: unset; 49 | } 50 | 51 | .rs__option { 52 | font-family: var(--font-body); 53 | font-size: $baseline-body-size; 54 | 55 | color: var(--theme-elevation-800); 56 | margin: 4px 8px; 57 | width: calc(100% - 16px); 58 | border-radius: var(--style-radius-m); 59 | font-weight: 600; 60 | 61 | transition: var(--dr-fast) var(--dr-transition); 62 | transition-property: background-color, color; 63 | 64 | &--is-focused { 65 | background-color: var(--theme-elevation-150); 66 | } 67 | 68 | &--is-selected { 69 | background-color: var(--theme-elevation-200); 70 | 71 | &:hover { 72 | background-color: var(--theme-elevation-200); 73 | } 74 | } 75 | 76 | &:hover { 77 | background-color: var(--theme-elevation-150); 78 | } 79 | } 80 | 81 | &--error { 82 | div.rs__control { 83 | background-color: var(--theme-error-100); 84 | } 85 | } 86 | 87 | &.rs--is-disabled .rs__control { 88 | background: var(--theme-elevation-50); 89 | } 90 | } 91 | -------------------------------------------------------------------------------- /themes/dark-rabbit/compnents/elements/DocumentHeader/Tabs/Tab/index.scss: -------------------------------------------------------------------------------- 1 | .doc-tab { 2 | @extend %h5; 3 | position: relative; 4 | border-radius: var(--style-radius-m); 5 | 6 | &__link { 7 | text-decoration: none; 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | white-space: nowrap; 12 | 13 | // Use a pseudo element for the accessability so that it doesn't take up DOM space 14 | // Also because the parent element has `overflow: hidden` which would clip an outline 15 | &:focus-visible::after { 16 | content: ''; 17 | border: var(--accessibility-outline); 18 | position: absolute; 19 | top: 0; 20 | right: 0; 21 | bottom: 0; 22 | left: 0; 23 | pointer-events: none; 24 | } 25 | } 26 | 27 | &:focus:not(:focus-visible) { 28 | opacity: 1; 29 | } 30 | 31 | &::before { 32 | content: ''; 33 | display: block; 34 | position: absolute; 35 | width: 100%; 36 | height: 100%; 37 | border-radius: 2px; 38 | background-color: var(--theme-elevation-50); 39 | opacity: 0; 40 | border-radius: var(--style-radius-m); 41 | } 42 | 43 | &:hover { 44 | &::before { 45 | opacity: 1; 46 | } 47 | 48 | .doc-tab__count { 49 | background-color: var(--theme-elevation-150); 50 | } 51 | } 52 | 53 | &--active { 54 | &::before { 55 | opacity: 1; 56 | background-color: var(--theme-elevation-100); 57 | border-radius: var(--style-radius-m); 58 | } 59 | 60 | .doc-tab { 61 | &__count { 62 | background-color: var(--theme-elevation-250); 63 | } 64 | } 65 | 66 | &:hover { 67 | .doc-tab { 68 | &__count { 69 | background-color: var(--theme-elevation-250); 70 | } 71 | } 72 | } 73 | } 74 | 75 | &__label { 76 | display: flex; 77 | position: relative; 78 | align-items: center; 79 | gap: 4px; 80 | width: 100%; 81 | height: 100%; 82 | padding: calc(var(--base) / 2) calc(var(--base)); 83 | } 84 | 85 | &__count { 86 | padding: 0px 7px; 87 | background-color: var(--theme-elevation-100); 88 | border-radius: var(--style-radius-m); 89 | } 90 | } 91 | -------------------------------------------------------------------------------- /themes/dark-rabbit/scss/fonts.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'Suisse Intl'; 3 | src: 4 | url('../assets/fonts/SuisseIntl.woff2') format('woff2'), 5 | url('../assets/fonts/SuisseIntl.woff') format('woff'); 6 | font-weight: normal; 7 | font-style: normal; 8 | } 9 | 10 | @font-face { 11 | font-family: 'Suisse Intl'; 12 | src: 13 | url('../assets/fonts/SuisseIntl-Medium.woff2') format('woff2'), 14 | url('../assets/fonts/SuisseIntl-Medium.woff') format('woff'); 15 | font-weight: 500; 16 | font-style: normal; 17 | } 18 | 19 | @font-face { 20 | font-family: 'Suisse Intl'; 21 | src: 22 | url('../assets/fonts/SuisseIntl-SemiBold.woff2') format('woff2'), 23 | url('../assets/fonts/SuisseIntl-SemiBold.woff') format('woff'); 24 | font-weight: 600; 25 | font-style: normal; 26 | } 27 | 28 | @font-face { 29 | font-family: 'Suisse Intl'; 30 | src: 31 | url('../assets/fonts/SuisseIntl-Bold.woff2') format('woff2'), 32 | url('../assets/fonts/SuisseIntl-Bold.woff') format('woff'); 33 | font-weight: bold; 34 | font-style: normal; 35 | } 36 | 37 | @font-face { 38 | font-family: 'Merriweather'; 39 | font-style: normal; 40 | font-weight: 400; 41 | src: 42 | local(''), 43 | url('../assets/fonts/merriweather-v30-latin-regular.woff2') format('woff2'), 44 | url('../assets/fonts/merriweather-v30-latin-regular.woff') format('woff'); 45 | } 46 | 47 | @font-face { 48 | font-family: 'Merriweather'; 49 | font-style: italic; 50 | font-weight: 400; 51 | src: 52 | local(''), 53 | url('../assets/fonts/merriweather-v30-latin-italic.woff2') format('woff2'), 54 | url('../assets/fonts/merriweather-v30-latin-italic.woff') format('woff'); 55 | } 56 | 57 | @font-face { 58 | font-family: 'Merriweather'; 59 | font-style: normal; 60 | font-weight: 900; 61 | src: 62 | local(''), 63 | url('../assets/fonts/merriweather-v30-latin-900.woff2') format('woff2'), 64 | url('../assets/fonts/merriweather-v30-latin-900.woff') format('woff'); 65 | } 66 | 67 | @font-face { 68 | font-family: 'Merriweather'; 69 | font-style: italic; 70 | font-weight: 900; 71 | src: 72 | local(''), 73 | url('../assets/fonts/merriweather-v30-latin-900italic.woff2') format('woff2'), 74 | url('../assets/fonts/merriweather-v30-latin-900italic.woff') format('woff'); 75 | } 76 | -------------------------------------------------------------------------------- /themes/dark-rabbit/scss/type.scss: -------------------------------------------------------------------------------- 1 | @import 'vars'; 2 | @import 'queries'; 3 | 4 | ///////////////////////////// 5 | // HEADINGS 6 | ///////////////////////////// 7 | 8 | %h1, 9 | %h2, 10 | %h3, 11 | %h4, 12 | %h5, 13 | %h6 { 14 | font-family: var(--font-body); 15 | font-weight: 500; 16 | } 17 | 18 | %jumbo { 19 | font-size: base(2.5); 20 | line-height: 1; 21 | margin: 0 0 base(2); 22 | } 23 | 24 | %h1 { 25 | margin: 0 0 base(1); 26 | font-size: base(2); 27 | line-height: 1.15; 28 | letter-spacing: -1px; 29 | 30 | @include small-break { 31 | letter-spacing: -0.5px; 32 | font-size: base(1.25); 33 | } 34 | } 35 | 36 | %h2 { 37 | margin: 0 0 base(1); 38 | font-size: base(1.25); 39 | line-height: 1.15; 40 | letter-spacing: -0.5px; 41 | 42 | @include small-break { 43 | font-size: base(0.85); 44 | } 45 | } 46 | 47 | %h3 { 48 | margin: 0 0 base(1); 49 | font-size: base(0.925); 50 | line-height: 1.25; 51 | letter-spacing: -0.5px; 52 | 53 | @include small-break { 54 | font-size: base(0.65); 55 | line-height: 1.25; 56 | } 57 | } 58 | 59 | %h4 { 60 | margin: 0 0 $baseline; 61 | font-size: base(0.75); 62 | line-height: 1.5; 63 | letter-spacing: -0.375px; 64 | } 65 | 66 | %h5 { 67 | margin: 0; 68 | font-size: base(0.5625); 69 | line-height: 1.5; 70 | } 71 | 72 | %h6 { 73 | margin: 0; 74 | font-size: base(0.5); 75 | line-height: 1.5; 76 | } 77 | 78 | %small { 79 | margin: 0; 80 | font-size: 11px; 81 | line-height: 1.5; 82 | } 83 | 84 | ///////////////////////////// 85 | // TYPE STYLES 86 | ///////////////////////////// 87 | 88 | %large-body { 89 | font-size: base(0.6); 90 | line-height: base(1); 91 | letter-spacing: base(0.02); 92 | 93 | @include mid-break { 94 | font-size: base(0.7); 95 | line-height: base(1); 96 | } 97 | 98 | @include small-break { 99 | font-size: base(0.55); 100 | line-height: base(0.75); 101 | } 102 | } 103 | 104 | %body { 105 | font-size: $baseline-body-size; 106 | line-height: $baseline-px; 107 | font-weight: normal; 108 | } 109 | 110 | %code { 111 | font-size: base(0.4); 112 | color: var(--theme-elevation-400); 113 | 114 | span { 115 | color: var(--theme-elevation-800); 116 | } 117 | } 118 | -------------------------------------------------------------------------------- /themes/dark-rabbit/compnents/forms/field-types/Array/index.scss: -------------------------------------------------------------------------------- 1 | .array-field { 2 | display: flex; 3 | flex-direction: column; 4 | gap: calc(var(--base) / 2); 5 | 6 | &__header { 7 | display: flex; 8 | flex-direction: column; 9 | gap: calc(var(--base) / 2); 10 | 11 | &__header-content { 12 | display: flex; 13 | flex-direction: column; 14 | gap: calc(var(--base) / 4); 15 | } 16 | } 17 | 18 | &--has-no-error { 19 | > .array-field__header .array-field__header-content { 20 | color: var(--theme-text); 21 | } 22 | } 23 | 24 | &__header-content { 25 | display: flex; 26 | align-items: center; 27 | gap: base(0.5); 28 | } 29 | 30 | &__header-wrap { 31 | display: flex; 32 | align-items: flex-end; 33 | width: 100%; 34 | justify-content: space-between; 35 | } 36 | 37 | &__header-actions { 38 | list-style: none; 39 | margin: 0; 40 | padding: 0; 41 | display: flex; 42 | } 43 | 44 | &__header-action { 45 | @extend %btn-reset; 46 | cursor: pointer; 47 | margin-left: base(0.5); 48 | 49 | &:hover, 50 | &:focus-visible { 51 | text-decoration: underline; 52 | } 53 | } 54 | 55 | &__error-wrap { 56 | position: relative; 57 | } 58 | 59 | &__row-header { 60 | display: flex; 61 | align-items: center; 62 | gap: base(0.5); 63 | pointer-events: none; 64 | } 65 | 66 | &__draggable-rows { 67 | display: flex; 68 | flex-direction: column; 69 | gap: calc(var(--base) / 2); 70 | } 71 | 72 | &__title { 73 | margin-bottom: 0; 74 | } 75 | 76 | &__add-row { 77 | align-self: flex-start; 78 | color: var(--theme-elevation-400); 79 | margin: 0; 80 | 81 | &:hover { 82 | color: var(--theme-elevation-800); 83 | } 84 | } 85 | } 86 | 87 | html[data-theme='light'] { 88 | .array-field { 89 | &--has-error { 90 | > .array-field__header .array-field__header-content { 91 | color: var(--theme-error-750); 92 | } 93 | } 94 | } 95 | } 96 | 97 | html[data-theme='dark'] { 98 | .array-field { 99 | &--has-error { 100 | > .array-field__header .array-field__header-content { 101 | color: var(--theme-error-500); 102 | } 103 | } 104 | } 105 | } 106 | -------------------------------------------------------------------------------- /themes/dark-rabbit/compnents/elements/NavGroup/index.scss: -------------------------------------------------------------------------------- 1 | .nav-group { 2 | width: 100%; 3 | margin-bottom: base(0.1); 4 | 5 | &__toggle { 6 | cursor: pointer; 7 | color: inherit; 8 | background: transparent; 9 | padding-left: 0; 10 | border: 0; 11 | margin-bottom: base(0.15); 12 | width: 100%; 13 | text-align: left; 14 | display: flex; 15 | align-items: flex-start; 16 | padding: base(0.25) base(1) base(0.25) base(1); 17 | gap: base(0.5); 18 | justify-content: flex-start; 19 | font-weight: 500; 20 | border-radius: var(--style-radius-m); 21 | line-height: 25px; 22 | font-size: 14px; 23 | 24 | transition: var(--dr-fast) var(--dr-transition); 25 | transition-property: background-color, color; 26 | 27 | svg { 28 | flex-shrink: 0; 29 | margin-top: base(-0.2); 30 | } 31 | 32 | &:hover, 33 | &:focus-visible { 34 | background: var(--theme-elevation-150); 35 | color: inherit; 36 | 37 | .stroke { 38 | stroke: var(--dr-project-color); 39 | } 40 | } 41 | 42 | &:focus-visible { 43 | outline: none; 44 | } 45 | 46 | /* &::before { 47 | //content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWZvbGRlciI+PHBhdGggZD0iTTIwIDIwYTIgMiAwIDAgMCAyLTJWOGEyIDIgMCAwIDAtMi0yaC03LjlhMiAyIDAgMCAxLTEuNjktLjlMOS42IDMuOUEyIDIgMCAwIDAgNy45MyAzSDRhMiAyIDAgMCAwLTIgMnYxM2EyIDIgMCAwIDAgMiAyWiIvPjwvc3ZnPg==); 48 | content: '\e0d3'; 49 | font-family: 'lucide' !important; 50 | font-size: inherit; 51 | font-style: normal; 52 | -webkit-font-smoothing: antialiased; 53 | display: inline-block; 54 | color: var(--dr-project-color); 55 | font-size: 24px; 56 | } */ 57 | } 58 | 59 | &__indicator { 60 | position: relative; 61 | flex-shrink: 0; 62 | margin-left: auto; 63 | 64 | svg .stroke { 65 | stroke: var(--dr-project-color); 66 | } 67 | } 68 | 69 | &--collapsed { 70 | .collapsible__toggle { 71 | border-bottom-right-radius: $style-radius-s; 72 | border-bottom-left-radius: $style-radius-s; 73 | } 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /themes/dark-rabbit/compnents/forms/field-types/Blocks/index.scss: -------------------------------------------------------------------------------- 1 | .blocks-field { 2 | display: flex; 3 | flex-direction: column; 4 | gap: calc(var(--base) / 2); 5 | 6 | &__header { 7 | h3 { 8 | margin: 0; 9 | } 10 | } 11 | 12 | &__header-wrap { 13 | display: flex; 14 | align-items: flex-end; 15 | width: 100%; 16 | justify-content: space-between; 17 | } 18 | 19 | &__heading-with-error { 20 | display: flex; 21 | align-items: center; 22 | gap: base(0.5); 23 | } 24 | 25 | &--has-no-error { 26 | > .array-field__header .array-field__heading-with-error { 27 | color: var(--theme-text); 28 | } 29 | } 30 | 31 | &--has-error { 32 | > .array-field__header { 33 | color: var(--theme-error-500); 34 | } 35 | } 36 | 37 | &__error-pill { 38 | align-self: center; 39 | } 40 | 41 | &__header-actions { 42 | list-style: none; 43 | margin: 0; 44 | padding: 0; 45 | display: flex; 46 | } 47 | 48 | &__header-action { 49 | @extend %btn-reset; 50 | cursor: pointer; 51 | margin-left: base(0.5); 52 | 53 | &:hover, 54 | &:focus-visible { 55 | text-decoration: underline; 56 | } 57 | } 58 | 59 | &__block-header { 60 | display: inline-flex; 61 | max-width: 100%; 62 | overflow: hidden; 63 | gap: base(0.375); 64 | } 65 | 66 | &__block-number { 67 | flex-shrink: 0; 68 | } 69 | 70 | &__block-pill { 71 | flex-shrink: 0; 72 | display: block; 73 | line-height: unset; 74 | } 75 | 76 | &__error-wrap { 77 | position: relative; 78 | } 79 | 80 | &__rows { 81 | display: flex; 82 | flex-direction: column; 83 | gap: calc(var(--base) / 2); 84 | } 85 | 86 | &__drawer-toggler { 87 | background-color: transparent; 88 | margin: 0; 89 | padding: 0; 90 | border: none; 91 | align-self: flex-start; 92 | 93 | .btn { 94 | color: var(--theme-elevation-400); 95 | margin: 0; 96 | 97 | &:hover { 98 | color: var(--theme-elevation-800); 99 | } 100 | } 101 | } 102 | } 103 | 104 | html[data-theme='light'] { 105 | .blocks-field--has-error { 106 | .section-title__input, 107 | .blocks-field__heading-with-error { 108 | color: var(--theme-error-750); 109 | } 110 | } 111 | } 112 | 113 | html[data-theme='dark'] { 114 | .blocks-field--has-error { 115 | .section-title__input, 116 | .blocks-field__heading-with-error { 117 | color: var(--theme-error-500); 118 | } 119 | } 120 | } 121 | -------------------------------------------------------------------------------- /themes/dark-rabbit/compnents/elements/FileDetails/index.scss: -------------------------------------------------------------------------------- 1 | .file-details { 2 | background-color: var(--theme-elevation-50); 3 | border-radius: var(--style-radius-m); 4 | border: 2px solid var(--theme-elevation-150); 5 | 6 | header { 7 | display: flex; 8 | align-items: flex-start; 9 | border-bottom: none; 10 | } 11 | 12 | &__remove { 13 | margin: $baseline $baseline $baseline 0; 14 | } 15 | 16 | &__main-detail { 17 | padding: $baseline base(1.5); 18 | width: auto; 19 | flex-grow: 1; 20 | min-width: 0; 21 | display: flex; 22 | flex-direction: column; 23 | align-self: center; 24 | gap: base(0.25); 25 | } 26 | 27 | &__toggle-more-info { 28 | font-weight: 600; 29 | text-decoration: none; 30 | 31 | &:hover, 32 | &:focus-visible { 33 | text-decoration: underline; 34 | } 35 | } 36 | 37 | &__toggle-icon { 38 | padding: calc(var(--base) / 4); 39 | } 40 | 41 | &__sizes { 42 | margin: 0; 43 | padding: base(1.5) $baseline 0; 44 | list-style: none; 45 | display: flex; 46 | flex-wrap: wrap; 47 | 48 | li { 49 | width: 50%; 50 | padding: 0 base(0.5); 51 | margin-bottom: $baseline; 52 | } 53 | } 54 | 55 | &__size-label { 56 | color: var(--theme-elevation-400); 57 | } 58 | 59 | &__file-mutation { 60 | display: flex; 61 | margin-top: base(0.25); 62 | gap: calc(var(--base) / 2); 63 | } 64 | 65 | &__edit { 66 | cursor: pointer; 67 | background-color: var(--theme-elevation-150); 68 | border: none; 69 | border-radius: $style-radius-s; 70 | padding: base(0.25) base(0.5); 71 | 72 | &:hover { 73 | background-color: var(--theme-elevation-100); 74 | } 75 | } 76 | 77 | @include large-break { 78 | &__main-detail { 79 | padding: $baseline; 80 | } 81 | 82 | &__sizes { 83 | display: block; 84 | padding: $baseline $baseline base(0.5); 85 | 86 | li { 87 | padding: 0; 88 | width: 100%; 89 | } 90 | } 91 | } 92 | 93 | @include mid-break { 94 | header { 95 | flex-wrap: wrap; 96 | } 97 | 98 | .thumbnail { 99 | width: 50%; 100 | order: 1; 101 | } 102 | 103 | &__remove { 104 | order: 2; 105 | margin-left: auto; 106 | margin-right: $baseline; 107 | } 108 | 109 | &__main-detail { 110 | border-top: $style-stroke-width-m solid var(--theme-elevation-0); 111 | order: 3; 112 | width: 100%; 113 | } 114 | } 115 | } 116 | -------------------------------------------------------------------------------- /themes/dark-rabbit/compnents/forms/field-types/Textarea/index.scss: -------------------------------------------------------------------------------- 1 | .field-type.textarea { 2 | position: relative; 3 | display: flex; 4 | flex-direction: column; 5 | 6 | .textarea-outer { 7 | @include formInput(); 8 | display: flex; 9 | resize: vertical; 10 | min-height: base(3); 11 | height: 100%; 12 | 13 | // Scrollbar for giant content 14 | max-height: calc(100vh - $top-header-offset - calc(#{base(5)})); 15 | overflow: hidden; 16 | 17 | @include mid-break { 18 | max-height: 60vh; 19 | } 20 | } 21 | 22 | &.read-only { 23 | .textarea-outer { 24 | background: var(--theme-elevation-200); 25 | color: var(--theme-elevation-450); 26 | &:hover { 27 | border-color: var(--theme-elevation-150); 28 | @include shadow-sm; 29 | } 30 | } 31 | } 32 | 33 | // This element takes exactly the same dimensions as the clone 34 | .textarea-inner { 35 | display: block; 36 | position: relative; 37 | line-height: inherit; 38 | flex-grow: 1; 39 | background: none; 40 | outline: none; 41 | } 42 | 43 | // Unstyle the textarea, the border is rendered on .textarea-outer 44 | .textarea-element { 45 | position: absolute; 46 | top: 0; 47 | left: 0; 48 | width: 100%; 49 | height: 100%; 50 | border: inherit; 51 | padding: inherit; 52 | font: inherit; 53 | line-height: inherit; 54 | color: inherit; 55 | background: none; 56 | overflow: auto; 57 | resize: none; 58 | outline: none; 59 | text-transform: inherit; 60 | 61 | &::-webkit-scrollbar { 62 | display: none; 63 | } 64 | &[data-rtl='true'] { 65 | direction: rtl; 66 | } 67 | } 68 | 69 | // Clone of textarea with same height 70 | .textarea-clone { 71 | vertical-align: top; 72 | display: inline-block; 73 | flex-grow: 1; 74 | overflow: hidden; 75 | text-overflow: ellipsis; 76 | white-space: pre-wrap; 77 | pointer-events: none; 78 | } 79 | 80 | .textarea-clone::before { 81 | content: attr(data-value) ' '; 82 | visibility: hidden; 83 | opacity: 0; 84 | white-space: pre-wrap; 85 | overflow-wrap: break-word; 86 | } 87 | 88 | .textarea-clone::after { 89 | content: attr(data-after); 90 | opacity: 0.5; 91 | } 92 | 93 | @include mid-break { 94 | padding: 0; 95 | } 96 | } 97 | 98 | html[data-theme='light'] { 99 | .field-type.textarea { 100 | &.error { 101 | .textarea-outer { 102 | @include lightInputError; 103 | } 104 | } 105 | } 106 | } 107 | 108 | html[data-theme='dark'] { 109 | .field-type.textarea { 110 | &.error { 111 | .textarea-outer { 112 | @include darkInputError; 113 | } 114 | } 115 | } 116 | } 117 | -------------------------------------------------------------------------------- /themes/dark-rabbit/compnents/elements/Drawer/index.scss: -------------------------------------------------------------------------------- 1 | $transTime: 200; 2 | 3 | .drawer { 4 | display: flex; 5 | overflow: hidden; 6 | position: fixed; 7 | height: 100vh; 8 | 9 | &__blur-bg { 10 | @include blur-bg; 11 | position: absolute; 12 | z-index: 1; 13 | top: 0; 14 | right: 0; 15 | bottom: 0; 16 | left: 0; 17 | opacity: 0; 18 | transition: all #{$transTime}ms linear; 19 | } 20 | 21 | &__content { 22 | opacity: 0; 23 | transform: translateX(calc(var(--base) * 4)); 24 | position: relative; 25 | z-index: 2; 26 | width: 70%; 27 | overflow: hidden; 28 | transition: all #{$transTime}ms linear; 29 | background-color: var(--theme-bg); 30 | 31 | @include small-break { 32 | width: 100%; 33 | } 34 | } 35 | 36 | &__content-children { 37 | position: relative; 38 | z-index: 1; 39 | overflow: auto; 40 | height: 100%; 41 | } 42 | 43 | &--is-open { 44 | .drawer { 45 | &__content, 46 | &__blur-bg { 47 | opacity: 1; 48 | } 49 | 50 | &__close { 51 | opacity: 0.1; 52 | transition: opacity #{$transTime}ms linear; 53 | transition-delay: #{calc($transTime / 2)}ms; 54 | } 55 | 56 | &__content { 57 | transform: translateX(0); 58 | } 59 | } 60 | } 61 | 62 | &__close { 63 | @extend %btn-reset; 64 | position: relative; 65 | z-index: 2; 66 | flex-shrink: 0; 67 | text-indent: -9999px; 68 | cursor: pointer; 69 | opacity: 0; 70 | will-change: opacity; 71 | transition: none; 72 | transition-delay: 0ms; 73 | flex-grow: 1; 74 | background: var(--theme-elevation-800); 75 | 76 | &:active, 77 | &:focus { 78 | outline: 0; 79 | } 80 | } 81 | 82 | &__header { 83 | display: flex; 84 | margin-top: base(2.5); 85 | margin-bottom: base(1); 86 | width: 100%; 87 | 88 | &__title { 89 | margin: 0; 90 | flex-grow: 1; 91 | } 92 | 93 | &__close { 94 | border: 0; 95 | background-color: transparent; 96 | padding: 0; 97 | cursor: pointer; 98 | overflow: hidden; 99 | width: base(1); 100 | height: base(1); 101 | direction: ltr; 102 | 103 | svg { 104 | width: base(2.75); 105 | height: base(2.75); 106 | position: relative; 107 | left: base(-0.825); 108 | top: base(-0.825); 109 | 110 | .stroke { 111 | stroke-width: 2px; 112 | vector-effect: non-scaling-stroke; 113 | } 114 | } 115 | } 116 | } 117 | 118 | @include mid-break { 119 | &__header { 120 | margin-top: base(1.5); 121 | } 122 | } 123 | } 124 | 125 | html[data-theme='dark'] { 126 | .drawer { 127 | &__close { 128 | background: var(--color-base-1000); 129 | } 130 | 131 | &--is-open { 132 | .drawer__close { 133 | opacity: 0.25; 134 | } 135 | } 136 | } 137 | } 138 | -------------------------------------------------------------------------------- /themes/dark-rabbit/compnents/forms/field-types/Tabs/index.scss: -------------------------------------------------------------------------------- 1 | .tabs-field { 2 | margin-top: base(2); 3 | margin-left: calc(var(--gutter-h) * -1); 4 | margin-right: calc(var(--gutter-h) * -1); 5 | 6 | &__content-wrap { 7 | padding-left: var(--gutter-h); 8 | padding-right: var(--gutter-h); 9 | } 10 | 11 | &--within-collapsible { 12 | margin: 0 calc(#{$baseline} * -1); 13 | 14 | .tabs-field__content-wrap { 15 | padding-left: $baseline; 16 | padding-right: $baseline; 17 | } 18 | 19 | .tabs-field__tabs { 20 | &:before, 21 | &:after { 22 | content: ' '; 23 | display: block; 24 | width: $baseline; 25 | } 26 | } 27 | } 28 | 29 | &__tabs-wrap { 30 | overflow: auto; 31 | margin-bottom: $baseline; 32 | } 33 | 34 | &__tabs { 35 | border-bottom: 1px solid var(--theme-elevation-100); 36 | display: inline-flex; 37 | min-width: 100%; 38 | vertical-align: bottom; 39 | 40 | &:before, 41 | &:after { 42 | content: ' '; 43 | display: block; 44 | width: var(--gutter-h); 45 | flex-shrink: 0; 46 | } 47 | } 48 | 49 | &__tab-button { 50 | @extend %btn-reset; 51 | @extend %h4; 52 | display: flex; 53 | padding-bottom: base(1); 54 | margin: 0 $baseline 0 0; 55 | cursor: pointer; 56 | opacity: 0.5; 57 | position: relative; 58 | white-space: nowrap; 59 | flex-shrink: 0; 60 | gap: base(0.5); 61 | 62 | &:last-child { 63 | margin: 0; 64 | } 65 | 66 | &:after { 67 | content: ' '; 68 | position: absolute; 69 | right: 0; 70 | bottom: -1px; 71 | left: 0; 72 | height: 1px; 73 | background: var(--theme-elevation-800); 74 | opacity: 0; 75 | } 76 | 77 | &:hover { 78 | opacity: 0.75; 79 | 80 | &:after { 81 | opacity: 0.2; 82 | } 83 | } 84 | } 85 | 86 | &__tab-button--active { 87 | opacity: 1 !important; 88 | 89 | &:after { 90 | opacity: 1 !important; 91 | height: 2px; 92 | } 93 | } 94 | 95 | &__description { 96 | margin-bottom: calc(var(--base) / 2); 97 | } 98 | 99 | @include small-break { 100 | &--within-collapsible { 101 | margin-left: calc(var(--gutter-h) * -1); 102 | margin-right: calc(var(--gutter-h) * -1); 103 | } 104 | 105 | &__tab-button { 106 | margin: 0 base(0.75) 0 0; 107 | padding-bottom: base(0.5); 108 | 109 | &:last-child { 110 | margin: 0; 111 | } 112 | } 113 | } 114 | } 115 | 116 | html[data-theme='light'] { 117 | .tabs-field { 118 | &__tab-button--has-error { 119 | color: var(--theme-error-750); 120 | &:after { 121 | background: var(--theme-error-500); 122 | } 123 | } 124 | } 125 | } 126 | 127 | html[data-theme='dark'] { 128 | .tabs-field { 129 | &__tab-button--has-error { 130 | color: var(--theme-error-500); 131 | &:after { 132 | background: var(--theme-error-500); 133 | } 134 | } 135 | } 136 | } 137 | -------------------------------------------------------------------------------- /themes/dark-rabbit/compnents/forms/field-types/Group/index.scss: -------------------------------------------------------------------------------- 1 | .group-field { 2 | margin-left: calc(var(--gutter-h) * -1); 3 | margin-right: calc(var(--gutter-h) * -1); 4 | border-bottom: 1px solid var(--theme-elevation-100); 5 | border-top: 1px solid var(--theme-elevation-100); 6 | 7 | &--top-level { 8 | padding: base(2) var(--gutter-h); 9 | 10 | &:first-child { 11 | padding-top: 0; 12 | border-top: 0; 13 | } 14 | } 15 | 16 | &--within-collapsible { 17 | margin-left: calc(var(--base) * -1); 18 | margin-right: calc(var(--base) * -1); 19 | padding: var(--base); 20 | 21 | &:first-child { 22 | border-top: 0; 23 | padding-top: 0; 24 | margin-top: 0; 25 | } 26 | 27 | &:last-child { 28 | padding-bottom: 0; 29 | border-bottom: 0; 30 | } 31 | } 32 | 33 | &--within-group { 34 | margin-left: 0; 35 | margin-right: 0; 36 | padding: 0; 37 | border-top: 0; 38 | border-bottom: 0; 39 | } 40 | 41 | &--within-row { 42 | margin: 0; 43 | border-top: 0; 44 | border-bottom: 0; 45 | } 46 | 47 | &--within-tab:first-child { 48 | margin-top: 0; 49 | border-top: 0; 50 | padding-top: 0; 51 | } 52 | 53 | &--within-tab:last-child { 54 | margin-bottom: 0; 55 | border-bottom: 0; 56 | padding-bottom: 0; 57 | } 58 | 59 | &--gutter { 60 | border-left: 1px solid var(--theme-elevation-100); 61 | padding: 0 0 0 $baseline; 62 | } 63 | 64 | &__header { 65 | margin-bottom: calc(var(--base) / 2); 66 | display: flex; 67 | align-items: center; 68 | gap: base(0.5); 69 | 70 | > header { 71 | display: flex; 72 | flex-direction: column; 73 | gap: calc(var(--base) / 4); 74 | border-bottom: 2px solid var(--theme-elevation-150); 75 | width: 100%; 76 | padding-bottom: 12px; 77 | } 78 | } 79 | 80 | &__title { 81 | margin-bottom: 0; 82 | } 83 | 84 | @include small-break { 85 | &--top-level { 86 | padding: var(--base) var(--gutter-h); 87 | 88 | &:first-child { 89 | padding-top: 0; 90 | border-top: 0; 91 | } 92 | } 93 | 94 | &__header { 95 | margin-bottom: calc(var(--base) / 2); 96 | } 97 | 98 | &--within-collapsible { 99 | margin-left: calc(var(--gutter-h) * -1); 100 | margin-right: calc(var(--gutter-h) * -1); 101 | } 102 | 103 | &--within-group { 104 | padding: 0; 105 | } 106 | 107 | &--gutter { 108 | padding-left: var(--gutter-h); 109 | } 110 | } 111 | } 112 | 113 | .group-field + .group-field { 114 | border-top: 0; 115 | padding-top: 0; 116 | } 117 | 118 | .group-field--within-row + .group-field--within-row { 119 | margin-top: 0; 120 | } 121 | 122 | .group-field--within-tab + .group-field--within-row { 123 | padding-top: 0; 124 | } 125 | 126 | html[data-theme='light'] { 127 | .group-field { 128 | &--has-error { 129 | color: var(--theme-error-750); 130 | &:after { 131 | background: var(--theme-error-500); 132 | } 133 | } 134 | } 135 | } 136 | 137 | html[data-theme='dark'] { 138 | .group-field { 139 | &--has-error { 140 | color: var(--theme-error-500); 141 | &:after { 142 | background: var(--theme-error-500); 143 | } 144 | } 145 | } 146 | } 147 | -------------------------------------------------------------------------------- /themes/dark-rabbit/index.scss: -------------------------------------------------------------------------------- 1 | @import '~payload/scss'; 2 | 3 | /** 4 | * Override styles 5 | */ 6 | @import './scss/vars'; 7 | @import './scss/z-index'; 8 | @import './scss/type'; 9 | @import './scss/queries'; 10 | @import './scss/resets'; 11 | @import './scss/svg'; 12 | @import './scss/app.scss'; 13 | 14 | // Custom vars 15 | @import './theme-vars'; 16 | @import './theme'; 17 | 18 | // Elements 19 | @import './compnents/elements/Button'; 20 | @import './compnents/elements/Collapsible'; 21 | @import './compnents/elements/ColumnSelector'; 22 | @import './compnents/elements/Card'; 23 | @import './compnents/elements/DatePicker'; 24 | @import './compnents/elements/DocumentFields'; 25 | @import './compnents/elements/DocumentControls'; 26 | @import './compnents/elements/DocumentHeader'; 27 | @import './compnents/elements/DocumentHeader/Tabs'; 28 | @import './compnents/elements/DocumentHeader/Tabs/Tab'; 29 | @import './compnents/elements/Drawer'; 30 | @import './compnents/elements/EditMany'; 31 | @import './compnents/elements/FileDetails'; 32 | @import './compnents/elements/ListControls'; 33 | @import './compnents/elements/Nav'; 34 | @import './compnents/elements/Nav/NavToggler'; 35 | @import './compnents/elements/NavGroup'; 36 | @import './compnents/elements/Paginator'; 37 | @import './compnents/elements/Pill'; 38 | @import './compnents/elements/Popup'; 39 | @import './compnents/elements/Popup/PopupButtonList'; 40 | @import './compnents/elements/ReactSelect'; 41 | @import './compnents/elements/ReactSelect/MultiValue'; 42 | @import './compnents/elements/Table'; 43 | @import './compnents/elements/Thumbnail'; 44 | @import './compnents/elements/WhereBuilder'; 45 | 46 | // Forms 47 | @import './compnents/forms/Label'; 48 | 49 | // Forms: Form Fields 50 | @import './compnents/forms/field-types/Array'; 51 | @import './compnents/forms/field-types/Blocks'; 52 | @import './compnents/forms/field-types/Blocks/BlocksDrawer'; 53 | @import './compnents/forms/field-types/Blocks/BlocksDrawer/BlockSearch'; 54 | @import './compnents/forms/field-types/Blocks/SectionTitle'; 55 | @import './compnents/forms/field-types/Checkbox'; 56 | @import './compnents/forms/field-types/Code'; 57 | @import './compnents/forms/field-types/Collapsible'; 58 | @import './compnents/forms/field-types/ConfirmPassword'; 59 | @import './compnents/forms/field-types/DateTime'; 60 | @import './compnents/forms/field-types/Email'; 61 | @import './compnents/forms/field-types/Group'; 62 | @import './compnents/forms/field-types/JSON'; 63 | @import './compnents/forms/field-types/Number'; 64 | @import './compnents/forms/field-types/Password'; 65 | @import './compnents/forms/field-types/Point'; 66 | @import './compnents/forms/field-types/RadioGroup'; 67 | @import './compnents/forms/field-types/RadioGroup/RadioInput'; 68 | @import './compnents/forms/field-types/Relationship'; 69 | @import './compnents/forms/field-types/Relationship/AddNew'; 70 | @import './compnents/forms/field-types/Relationship/select-components/MultiValueLabel'; 71 | @import './compnents/forms/field-types/Relationship/select-components/SingleValue'; 72 | @import './compnents/forms/field-types/Row'; 73 | @import './compnents/forms/field-types/Select'; 74 | @import './compnents/forms/field-types/Tabs'; 75 | @import './compnents/forms/field-types/Text'; 76 | @import './compnents/forms/field-types/Textarea'; 77 | @import './compnents/forms/field-types/Upload'; 78 | 79 | // views 80 | @import './compnents/views/Account'; 81 | @import './compnents/views/Dashboard'; 82 | @import './compnents/views/collections/Edit/Auth'; 83 | -------------------------------------------------------------------------------- /themes/dark-rabbit/compnents/elements/Pill/index.scss: -------------------------------------------------------------------------------- 1 | .pill { 2 | font-size: 1rem; 3 | line-height: base(1); 4 | display: inline-flex; 5 | background: var(--theme-elevation-150); 6 | color: var(--theme-elevation-800); 7 | border-radius: $style-radius-m; 8 | cursor: default; 9 | white-space: nowrap; 10 | overflow: hidden; 11 | text-overflow: ellipsis; 12 | border: 0; 13 | padding: base(0.1) base(0.5); 14 | align-items: center; 15 | flex-shrink: 0; 16 | font-weight: 500; 17 | 18 | &--rounded { 19 | border-radius: var(--style-radius-l); 20 | line-height: 18px; 21 | font-size: 12px; 22 | } 23 | 24 | &:active, 25 | &:focus:not(:focus-visible) { 26 | outline: none; 27 | } 28 | 29 | &:focus-visible { 30 | outline: var(--accessibility-outline); 31 | outline-offset: var(--accessibility-outline-offset); 32 | } 33 | 34 | .icon { 35 | flex-shrink: 0; 36 | } 37 | 38 | &__label { 39 | white-space: nowrap; 40 | overflow: hidden; 41 | text-overflow: ellipsis; 42 | } 43 | 44 | &__icon { 45 | padding: calc(var(--base) / 4); 46 | } 47 | 48 | &--has-action { 49 | cursor: pointer; 50 | text-decoration: none; 51 | } 52 | 53 | &--is-dragging { 54 | cursor: grabbing; 55 | } 56 | 57 | &--has-icon { 58 | svg { 59 | display: block; 60 | } 61 | } 62 | 63 | [dir='rtl'] &--align-icon-left { 64 | padding-right: 0; 65 | padding-left: 10px; 66 | } 67 | 68 | [dir='rtl'] &--align-icon-right { 69 | padding-right: 10px; 70 | padding-left: 0; 71 | } 72 | 73 | &--align-icon-left { 74 | padding-left: 0; 75 | } 76 | 77 | &--align-icon-right { 78 | padding-right: 0; 79 | } 80 | 81 | &--style-white { 82 | background: var(--theme-elevation-0); 83 | 84 | &.pill--has-action { 85 | &:hover { 86 | background: var(--theme-elevation-100); 87 | } 88 | 89 | &:active { 90 | background: var(--theme-elevation-100); 91 | } 92 | } 93 | } 94 | 95 | &--style-light { 96 | &.pill--has-action { 97 | &:hover { 98 | background: var(--theme-elevation-100); 99 | } 100 | 101 | &:active { 102 | background: var(--theme-elevation-100); 103 | } 104 | } 105 | } 106 | 107 | &--style-light-gray { 108 | background: var(--theme-elevation-100); 109 | color: var(--theme-elevation-800); 110 | } 111 | 112 | &--style-warning { 113 | background: var(--theme-warning-500); 114 | } 115 | 116 | &--style-success { 117 | background: var(--theme-success-500); 118 | color: var(--color-base-800); 119 | } 120 | 121 | &--style-dark { 122 | background: var(--theme-elevation-800); 123 | color: var(--theme-elevation-0); 124 | 125 | svg { 126 | @include color-svg(var(--theme-elevation-0)); 127 | } 128 | 129 | &.pill--has-action { 130 | &:hover { 131 | background: var(--theme-elevation-750); 132 | } 133 | 134 | &:active { 135 | background: var(--theme-elevation-700); 136 | } 137 | } 138 | } 139 | } 140 | 141 | html[data-theme='dark'] { 142 | .pill { 143 | &--style-error { 144 | background: var(--theme-error-500); 145 | color: var(--color-base-1000); 146 | } 147 | } 148 | } 149 | 150 | html[data-theme='light'] { 151 | .pill { 152 | &--style-error { 153 | background: var(--theme-error-250); 154 | color: var(--theme-error-750); 155 | } 156 | } 157 | } 158 | -------------------------------------------------------------------------------- /themes/dark-rabbit/compnents/elements/Nav/index.scss: -------------------------------------------------------------------------------- 1 | .nav { 2 | background: var(--theme-elevation-50); 3 | position: sticky; 4 | top: 0; 5 | left: 0; 6 | flex-shrink: 0; 7 | height: 100vh; 8 | width: var(--nav-width); 9 | border-right: 0; 10 | opacity: 0; 11 | transition: opacity var(--nav-trans-time) ease-in-out; 12 | 13 | &--nav-open { 14 | opacity: 1; 15 | } 16 | 17 | &__header { 18 | position: absolute; 19 | top: 0; 20 | width: 100%; 21 | height: var(--app-header-height); 22 | } 23 | 24 | &__header-content { 25 | z-index: 1; 26 | position: relative; 27 | height: 100%; 28 | } 29 | 30 | &__mobile-close { 31 | display: none; 32 | background: none; 33 | border: 0; 34 | outline: 0; 35 | padding: calc(var(--base) * 0.75) var(--gutter-h); 36 | } 37 | 38 | &__scroll { 39 | height: 100%; 40 | display: flex; 41 | flex-direction: column; 42 | padding: var(--app-header-height) 12px 12px 12px; 43 | overflow-y: auto; 44 | 45 | // remove the scrollbar here to prevent layout shift as nav groups are toggled 46 | &::-webkit-scrollbar { 47 | display: none; 48 | } 49 | } 50 | 51 | &__wrap { 52 | width: 100%; 53 | display: flex; 54 | flex-direction: column; 55 | align-items: flex-start; 56 | flex-grow: 1; 57 | } 58 | 59 | &__label { 60 | color: var(--theme-elevation-400); 61 | } 62 | 63 | &__controls { 64 | margin-top: auto; 65 | margin-bottom: 0; 66 | width: 100%; 67 | 68 | > * { 69 | margin-top: base(1); 70 | } 71 | 72 | a:focus-visible { 73 | outline: var(--accessibility-outline); 74 | } 75 | } 76 | 77 | &__log-out { 78 | &:hover { 79 | g { 80 | transform: translateX(-#{base(0.125)}); 81 | } 82 | } 83 | } 84 | 85 | nav { 86 | a { 87 | position: relative; 88 | padding: base(0.25) base(1) base(0.25) base(1); 89 | display: flex; 90 | text-decoration: none; 91 | margin-bottom: 4px; 92 | font-weight: 500; 93 | border-radius: var(--style-radius-m); 94 | 95 | transition: var(--dr-fast) var(--dr-transition); 96 | transition-property: background-color, color; 97 | 98 | &:focus:not(:focus-visible) { 99 | box-shadow: none; 100 | font-weight: 500; 101 | } 102 | 103 | &:hover, 104 | &:focus-visible { 105 | text-decoration: none; 106 | background: var(--theme-elevation-150); 107 | } 108 | 109 | &.active { 110 | font-weight: 500; 111 | padding-left: base(1); 112 | background: var(--theme-elevation-150); 113 | } 114 | } 115 | } 116 | 117 | &__link { 118 | display: flex; 119 | align-items: center; 120 | 121 | &.active { 122 | .nav__link-icon { 123 | display: none; 124 | } 125 | } 126 | } 127 | 128 | &__link-icon { 129 | display: none; 130 | margin-right: calc(var(--base) * 0.25); 131 | top: -1px; 132 | position: relative; 133 | } 134 | 135 | @include mid-break { 136 | &__scroll { 137 | padding: var(--app-header-height) base(0.5) base(2); 138 | } 139 | } 140 | 141 | @include small-break { 142 | &__scroll { 143 | padding: var(--app-header-height) var(--gutter-h) base(2); 144 | } 145 | 146 | nav a { 147 | font-size: base(0.875); 148 | line-height: base(1.5); 149 | } 150 | 151 | &__mobile-close { 152 | display: flex; 153 | height: 100%; 154 | align-items: center; 155 | } 156 | } 157 | } 158 | -------------------------------------------------------------------------------- /themes/dark-rabbit/compnents/forms/field-types/Checkbox/index.scss: -------------------------------------------------------------------------------- 1 | .checkbox { 2 | position: relative; 3 | margin-bottom: $baseline; 4 | 5 | .tooltip:not([aria-hidden='true']) { 6 | right: auto; 7 | position: relative; 8 | margin-bottom: 0.2em; 9 | max-width: fit-content; 10 | } 11 | 12 | &__error-wrap { 13 | position: relative; 14 | } 15 | } 16 | 17 | .checkbox-input { 18 | display: inline-flex; 19 | 20 | label { 21 | padding-bottom: 0; 22 | padding-left: base(0.5); 23 | 24 | &[for] { 25 | cursor: pointer; 26 | } 27 | } 28 | 29 | [dir='rtl'] &__input { 30 | margin-right: 0; 31 | margin-left: base(0.5); 32 | } 33 | 34 | &__input { 35 | @include formInput; 36 | display: flex; 37 | padding: 0; 38 | line-height: 0; 39 | position: relative; 40 | width: $baseline; 41 | height: $baseline; 42 | 43 | & input[type='checkbox'] { 44 | position: absolute; 45 | // Without the extra 4px, there is an uncheckable area due to the border of the parent element 46 | width: calc(100% + 4px); 47 | height: calc(100% + 4px); 48 | padding: 0; 49 | margin: 0; 50 | margin-left: -2px; 51 | margin-top: -2px; 52 | opacity: 0; 53 | border-radius: 0; 54 | z-index: 1; 55 | cursor: pointer; 56 | } 57 | 58 | & .icon--line, 59 | & .icon--check { 60 | height: 1.55rem; 61 | width: 1.55rem; 62 | } 63 | } 64 | 65 | &__icon { 66 | position: absolute; 67 | 68 | svg { 69 | opacity: 0; 70 | } 71 | } 72 | 73 | &:not(&--read-only) { 74 | &:active, 75 | &:focus-within, 76 | &:focus { 77 | .checkbox-input__input, 78 | & input[type='checkbox'] { 79 | @include inputShadowActive; 80 | 81 | outline: 0; 82 | box-shadow: none !important; 83 | border: 2px solid var(--theme-elevation-250); 84 | } 85 | } 86 | 87 | &:hover { 88 | .checkbox-input__input, 89 | & input[type='checkbox'] { 90 | border-color: var(--dr-project-color); 91 | } 92 | } 93 | } 94 | 95 | &:not(&--read-only):not(&--checked) { 96 | &:hover { 97 | cursor: pointer; 98 | 99 | svg { 100 | opacity: 0.2; 101 | } 102 | } 103 | } 104 | 105 | &--checked { 106 | .checkbox-input__icon { 107 | svg { 108 | opacity: 1; 109 | } 110 | } 111 | 112 | .checkbox-input__input, 113 | & input[type='checkbox'] { 114 | @include inputShadowActive; 115 | 116 | outline: 0; 117 | box-shadow: none !important; 118 | border: 2px solid var(--dr-project-color); 119 | } 120 | 121 | &:active, 122 | &:focus-within, 123 | &:focus { 124 | .checkbox-input__input, 125 | & input[type='checkbox'] { 126 | @include inputShadowActive; 127 | 128 | outline: 0; 129 | box-shadow: none !important; 130 | border: 2px solid var(--dr-project-color) !important; 131 | } 132 | } 133 | } 134 | 135 | &--read-only { 136 | .checkbox-input__input { 137 | background-color: var(--theme-elevation-100); 138 | } 139 | 140 | label { 141 | color: var(--theme-elevation-400); 142 | } 143 | } 144 | } 145 | 146 | html[data-theme='light'] { 147 | .checkbox { 148 | &.error { 149 | .checkbox-input__input { 150 | @include lightInputError; 151 | } 152 | } 153 | } 154 | } 155 | 156 | html[data-theme='dark'] { 157 | .checkbox { 158 | &.error { 159 | .checkbox-input__input { 160 | @include darkInputError; 161 | } 162 | } 163 | } 164 | } 165 | -------------------------------------------------------------------------------- /themes/dark-rabbit/compnents/elements/EditMany/index.scss: -------------------------------------------------------------------------------- 1 | .edit-many { 2 | &__toggle { 3 | font-size: 1rem; 4 | line-height: base(1); 5 | display: inline-flex; 6 | background: var(--theme-elevation-200); 7 | color: var(--theme-elevation-800); 8 | border-radius: $style-radius-m; 9 | white-space: nowrap; 10 | overflow: hidden; 11 | text-overflow: ellipsis; 12 | border: 0; 13 | padding: base(0.1) base(0.5); 14 | align-items: center; 15 | cursor: pointer; 16 | text-decoration: none; 17 | font-size: 1rem; 18 | 19 | &:active, 20 | &:focus { 21 | outline: none; 22 | } 23 | 24 | &:hover { 25 | background: var(--theme-elevation-100); 26 | } 27 | 28 | &:active { 29 | background: var(--theme-elevation-100); 30 | } 31 | } 32 | 33 | &__form { 34 | height: 100%; 35 | } 36 | 37 | &__main { 38 | width: calc(100% - #{base(15)}); 39 | display: flex; 40 | flex-direction: column; 41 | min-height: 100%; 42 | } 43 | 44 | &__header { 45 | display: flex; 46 | margin-top: base(2.5); 47 | margin-bottom: base(1); 48 | width: 100%; 49 | 50 | &__title { 51 | margin: 0; 52 | flex-grow: 1; 53 | } 54 | 55 | &__close { 56 | border: 0; 57 | background-color: transparent; 58 | padding: 0; 59 | cursor: pointer; 60 | overflow: hidden; 61 | width: base(1); 62 | height: base(1); 63 | 64 | svg { 65 | width: base(2.75); 66 | height: base(2.75); 67 | position: relative; 68 | [dir='ltr'] & { 69 | left: base(-0.825); 70 | } 71 | 72 | [dir='rtl'] & { 73 | right: base(-0.825); 74 | } 75 | top: base(-0.825); 76 | 77 | .stroke { 78 | stroke-width: 2px; 79 | vector-effect: non-scaling-stroke; 80 | } 81 | } 82 | } 83 | } 84 | 85 | &__edit { 86 | padding-top: base(1); 87 | padding-bottom: base(2); 88 | flex-grow: 1; 89 | } 90 | [dir='rtl'] &__sidebar-wrap { 91 | left: 0; 92 | border-right: 1px solid var(--theme-elevation-100); 93 | right: auto; 94 | } 95 | 96 | &__sidebar-wrap { 97 | position: fixed; 98 | width: base(15); 99 | height: 100%; 100 | top: 0; 101 | right: 0; 102 | overflow: visible; 103 | border-left: 1px solid var(--theme-elevation-100); 104 | } 105 | 106 | &__sidebar { 107 | width: 100%; 108 | height: 100%; 109 | overflow-y: auto; 110 | } 111 | 112 | &__sidebar-sticky-wrap { 113 | display: flex; 114 | flex-direction: column; 115 | min-height: 100%; 116 | } 117 | 118 | &__collection-actions, 119 | &__meta, 120 | &__sidebar-fields { 121 | [dir='ltr'] & { 122 | padding-left: base(1.5); 123 | } 124 | [dir='rtl'] & { 125 | padding-right: base(1.5); 126 | } 127 | } 128 | 129 | &__document-actions { 130 | padding-right: $baseline; 131 | position: sticky; 132 | top: 0; 133 | z-index: var(--z-nav); 134 | 135 | > * { 136 | position: relative; 137 | z-index: 1; 138 | } 139 | 140 | @include mid-break { 141 | @include blur-bg; 142 | } 143 | } 144 | 145 | &__document-actions { 146 | display: flex; 147 | flex-wrap: wrap; 148 | padding: base(1); 149 | gap: base(0.5); 150 | 151 | .form-submit { 152 | width: calc(50% - #{base(1)}); 153 | 154 | @include mid-break { 155 | width: auto; 156 | flex-grow: 1; 157 | } 158 | 159 | .btn { 160 | width: 100%; 161 | padding-left: base(0.5); 162 | padding-right: base(0.5); 163 | margin-bottom: 0; 164 | } 165 | } 166 | } 167 | 168 | @include mid-break { 169 | &__main { 170 | width: 100%; 171 | min-height: initial; 172 | } 173 | 174 | &__sidebar-wrap { 175 | position: static; 176 | width: 100%; 177 | height: initial; 178 | } 179 | 180 | &__form { 181 | display: block; 182 | } 183 | 184 | &__edit { 185 | padding-top: 0; 186 | padding-bottom: 0; 187 | } 188 | 189 | &__document-actions { 190 | position: fixed; 191 | bottom: 0; 192 | left: 0; 193 | right: 0; 194 | top: auto; 195 | z-index: var(--z-nav); 196 | } 197 | 198 | &__document-actions, 199 | &__sidebar-fields { 200 | padding-left: var(--gutter-h); 201 | padding-right: var(--gutter-h); 202 | } 203 | } 204 | } 205 | -------------------------------------------------------------------------------- /themes/dark-rabbit/compnents/elements/DocumentFields/index.scss: -------------------------------------------------------------------------------- 1 | .document-fields { 2 | width: 100%; 3 | display: flex; 4 | --doc-sidebar-width: 325px; 5 | 6 | &--has-sidebar { 7 | .document-fields { 8 | &__main { 9 | width: 66.66%; 10 | } 11 | 12 | &__edit { 13 | [dir='ltr'] & { 14 | top: 0; 15 | right: 0; 16 | //border-right: 1px solid var(--theme-elevation-100); 17 | border-right: none; 18 | padding-right: var(--gutter-h); 19 | } 20 | 21 | [dir='rtl'] & { 22 | top: 0; 23 | left: 0; 24 | //border-left: 1px solid var(--theme-elevation-100); 25 | border-left: none; 26 | padding-left: var(--gutter-h); 27 | } 28 | } 29 | 30 | &__fields { 31 | & > .tabs-field, 32 | & > .group-field { 33 | margin-right: calc(var(--gutter-h) * -1); 34 | } 35 | } 36 | } 37 | } 38 | 39 | &__main { 40 | width: 100%; 41 | display: flex; 42 | flex-direction: column; 43 | min-height: 100%; 44 | flex-grow: 1; 45 | } 46 | 47 | &__edit { 48 | padding-top: calc(var(--base) * 1.5); 49 | padding-bottom: var(--spacing-view-bottom); 50 | flex-grow: 1; 51 | } 52 | 53 | &__sidebar-wrap { 54 | position: sticky; 55 | top: var(--doc-controls-height); 56 | width: 33.33%; 57 | height: calc(100vh - var(--doc-controls-height)); 58 | min-width: var(--doc-sidebar-width); 59 | flex-shrink: 0; 60 | background: var(--theme-elevation-50); 61 | } 62 | 63 | &__sidebar { 64 | width: 100%; 65 | height: 100%; 66 | overflow-y: auto; 67 | display: flex; 68 | flex-direction: column; 69 | min-height: 100%; 70 | } 71 | 72 | &__sidebar-fields { 73 | display: flex; 74 | flex-direction: column; 75 | gap: var(--base); 76 | padding-top: calc(var(--base) * 1.5); 77 | padding-left: calc(var(--base) * 2); 78 | padding-right: var(--gutter-h); 79 | padding-bottom: var(--spacing-view-bottom); 80 | } 81 | 82 | &__label { 83 | color: var(--theme-elevation-400); 84 | } 85 | 86 | &--force-sidebar-wrap { 87 | display: block; 88 | 89 | .document-fields { 90 | &__main { 91 | width: 100%; 92 | min-height: initial; 93 | } 94 | 95 | &__sidebar-wrap { 96 | position: static; 97 | width: 100%; 98 | height: initial; 99 | border-left: 0; 100 | } 101 | 102 | &__sidebar { 103 | padding-bottom: base(3.5); 104 | overflow: visible; 105 | } 106 | 107 | &__sidebar-fields { 108 | padding-top: 0; 109 | padding-left: var(--gutter-h); 110 | padding-bottom: 0; 111 | } 112 | } 113 | } 114 | 115 | @include mid-break { 116 | display: block; 117 | 118 | &--has-sidebar { 119 | .document-fields { 120 | &__main { 121 | width: 100%; 122 | } 123 | 124 | &__edit { 125 | [dir='ltr'] & { 126 | border-right: 0; 127 | padding-right: var(--gutter-h); 128 | } 129 | 130 | [dir='rtl'] & { 131 | border-left: 0; 132 | padding-left: var(--gutter-h); 133 | } 134 | } 135 | 136 | &__fields { 137 | & > .tabs-field, 138 | & > .group-field { 139 | margin-right: calc(var(--gutter-h) * -1); 140 | } 141 | } 142 | } 143 | } 144 | 145 | &__main { 146 | width: 100%; 147 | min-height: initial; 148 | } 149 | 150 | &__sidebar-wrap { 151 | position: static; 152 | width: 100%; 153 | height: initial; 154 | border-left: 0; 155 | } 156 | 157 | &__form { 158 | display: block; 159 | } 160 | 161 | &__sidebar-fields { 162 | padding-top: 0; 163 | padding-left: var(--gutter-h); 164 | padding-right: var(--gutter-h); 165 | padding-bottom: 0; 166 | gap: base(0.5); 167 | 168 | [dir='ltr'] & { 169 | padding-right: var(--gutter-h); 170 | } 171 | 172 | [dir='rtl'] & { 173 | padding-left: var(--gutter-h); 174 | } 175 | } 176 | 177 | &__sidebar { 178 | padding-bottom: base(3.5); 179 | overflow: visible; 180 | } 181 | } 182 | 183 | @include small-break { 184 | &__sidebar-wrap { 185 | min-width: initial; 186 | width: 100%; 187 | } 188 | 189 | &__edit { 190 | padding-top: calc(var(--base) / 2); 191 | } 192 | } 193 | } 194 | -------------------------------------------------------------------------------- /themes/dark-rabbit/scss/app.scss: -------------------------------------------------------------------------------- 1 | @import 'fonts'; 2 | @import './toastify.scss'; 3 | @import './colors.scss'; 4 | @import './vars.scss'; 5 | 6 | :root { 7 | --base-px: 31; 8 | --base-body-size: 13; 9 | --base: calc((var(--base-px) / var(--base-body-size)) * 1rem); 10 | 11 | --breakpoint-xs-width: #{$breakpoint-xs-width}; 12 | --breakpoint-s-width: #{$breakpoint-s-width}; 13 | --breakpoint-m-width: #{$breakpoint-m-width}; 14 | --breakpoint-l-width: #{$breakpoint-l-width}; 15 | --scrollbar-width: 17px; 16 | 17 | --theme-bg: var(--theme-elevation-0); 18 | --theme-input-bg: var(--theme-elevation-0); 19 | --theme-text: var(--theme-elevation-800); 20 | --theme-overlay: rgba(5, 5, 5, 0.5); 21 | --theme-baseline: #{$baseline-px}; 22 | --theme-baseline-body-size: #{$baseline-body-size}; 23 | --font-body: 'Inter Variable', system-ui; 24 | --font-mono: monospace; 25 | --font-serif: 'Merriweather', serif; 26 | 27 | --style-radius-s: #{$style-radius-s}; 28 | --style-radius-m: #{$style-radius-m}; 29 | --style-radius-l: #{$style-radius-l}; 30 | 31 | --z-popup: 10; 32 | --z-nav: 20; 33 | --z-modal: 30; 34 | --z-status: 40; 35 | 36 | --accessibility-outline: 2px solid var(--theme-text); 37 | --accessibility-outline-offset: 2px; 38 | 39 | --gutter-h: #{base(2)}; 40 | --spacing-view-bottom: var(--gutter-h); 41 | --app-header-height: calc(var(--base) * 3); 42 | --doc-controls-height: calc(var(--base) * 3); 43 | --nav-width: 275px; 44 | --nav-trans-time: 150ms; 45 | 46 | @include mid-break { 47 | --gutter-h: #{base(2)}; 48 | --app-header-height: calc(var(--base) * 2); 49 | --doc-controls-height: calc(var(--base) * 2.5); 50 | } 51 | 52 | @include small-break { 53 | --gutter-h: #{base(0.5)}; 54 | --spacing-view-bottom: calc(var(--base) * 2); 55 | --nav-width: 100vw; 56 | } 57 | } 58 | 59 | ///////////////////////////// 60 | // GLOBAL STYLES 61 | ///////////////////////////// 62 | 63 | * { 64 | box-sizing: border-box; 65 | } 66 | 67 | html { 68 | @extend %body; 69 | background: var(--theme-bg); 70 | -webkit-font-smoothing: antialiased; 71 | 72 | &[data-theme='dark'] { 73 | --theme-bg: var(--theme-elevation-0); 74 | --theme-text: var(--theme-elevation-1000); 75 | --theme-input-bg: var(--theme-elevation-0); 76 | --theme-overlay: rgba(5, 5, 5, 0.75); 77 | color-scheme: dark; 78 | 79 | ::selection { 80 | color: var(--color-base-1000); 81 | } 82 | 83 | ::-moz-selection { 84 | color: var(--color-base-1000); 85 | } 86 | } 87 | 88 | @include mid-break { 89 | font-size: 12px; 90 | } 91 | } 92 | 93 | html, 94 | body, 95 | #app { 96 | height: 100%; 97 | } 98 | 99 | body { 100 | font-family: var(--font-body); 101 | font-weight: 400; 102 | color: var(--theme-text); 103 | margin: 0; 104 | // this is for the nav to be able to push the document over 105 | overflow-x: hidden; 106 | } 107 | 108 | ::selection { 109 | background: var(--theme-success-500); 110 | color: var(--theme-base-800); 111 | } 112 | 113 | ::-moz-selection { 114 | background: var(--theme-success-500); 115 | color: var(--theme-base-800); 116 | } 117 | 118 | img { 119 | max-width: 100%; 120 | height: auto; 121 | display: block; 122 | } 123 | 124 | h1 { 125 | @extend %h1; 126 | } 127 | 128 | h2 { 129 | @extend %h2; 130 | } 131 | 132 | h3 { 133 | @extend %h3; 134 | } 135 | 136 | h4 { 137 | @extend %h4; 138 | } 139 | 140 | h5 { 141 | @extend %h5; 142 | } 143 | 144 | h6 { 145 | @extend %h6; 146 | } 147 | 148 | p { 149 | margin: 0 0 $baseline; 150 | } 151 | 152 | ul, 153 | ol { 154 | padding-left: $baseline; 155 | margin: 0 0 $baseline; 156 | } 157 | 158 | :focus-visible { 159 | outline: var(--accessibility-outline); 160 | } 161 | 162 | a { 163 | color: currentColor; 164 | 165 | transition: var(--dr-fast) var(--dr-transition); 166 | transition-property: background-color, color; 167 | 168 | &:focus { 169 | &:not(:focus-visible) { 170 | opacity: 0.8; 171 | } 172 | outline: none; 173 | } 174 | 175 | &:active { 176 | opacity: 0.7; 177 | outline: none; 178 | } 179 | } 180 | 181 | svg { 182 | vertical-align: middle; 183 | } 184 | 185 | dialog { 186 | width: 100%; 187 | border: 0; 188 | padding: 0; 189 | color: currentColor; 190 | } 191 | 192 | .payload__modal-item { 193 | min-height: 100%; 194 | background: transparent; 195 | } 196 | 197 | .payload__modal-container--enterDone { 198 | overflow: auto; 199 | } 200 | 201 | .payload__modal-item--enter, 202 | .payload__modal-item--enterDone { 203 | z-index: var(--z-modal); 204 | } 205 | -------------------------------------------------------------------------------- /themes/dark-rabbit/compnents/elements/Collapsible/index.scss: -------------------------------------------------------------------------------- 1 | .collapsible { 2 | --toggle-pad-h: #{base(0.75)}; 3 | --toggle-pad-v: #{base(0.5)}; 4 | 5 | border-radius: $style-radius-m; 6 | 7 | &__toggle-wrap { 8 | position: relative; 9 | } 10 | 11 | &__drag { 12 | opacity: 0.5; 13 | position: absolute; 14 | z-index: 1; 15 | top: var(--toggle-pad-v); 16 | left: base(0.5); 17 | 18 | /* &::before { 19 | content: '\e0e5'; 20 | display: inline-block; 21 | font-family: 'lucide' !important; 22 | font-size: inherit; 23 | font-style: normal; 24 | -webkit-font-smoothing: antialiased; 25 | font-size: 24px; 26 | color: var(--theme-elevation-900); 27 | } */ 28 | 29 | & > .icon { 30 | //display: none; 31 | } 32 | } 33 | 34 | &__toggle { 35 | @extend %btn-reset; 36 | @extend %body; 37 | text-align: left; 38 | cursor: pointer; 39 | border-top-right-radius: $style-radius-m; 40 | border-top-left-radius: $style-radius-m; 41 | width: 100%; 42 | color: transparent; 43 | transition: var(--dr-fast) var(--dr-transition); 44 | transition-property: background-color, color; 45 | 46 | span { 47 | user-select: none; 48 | } 49 | } 50 | 51 | & .rah-static { 52 | transition: height var(--dr-medium) var(--dr-transition); 53 | } 54 | 55 | &--style-default { 56 | border: 2px solid var(--theme-elevation-150); 57 | &:hover { 58 | border: 2px solid var(--theme-elevation-150); 59 | } 60 | 61 | > .collapsible__toggle-wrap { 62 | .row-label { 63 | color: var(--theme-text); 64 | } 65 | .collapsible__toggle { 66 | background: var(--theme-elevation-50); 67 | } 68 | } 69 | &.collapsible--hovered { 70 | > .collapsible__toggle-wrap .collapsible__toggle { 71 | background: var(--theme-elevation-100); 72 | } 73 | } 74 | } 75 | 76 | &__toggle, 77 | &__header-wrap { 78 | padding: var(--toggle-pad-v) var(--toggle-pad-h); 79 | } 80 | 81 | &__header-wrap { 82 | position: absolute; 83 | top: 0; 84 | right: base(3); 85 | bottom: 0; 86 | left: 0; 87 | pointer-events: none; 88 | 89 | > * { 90 | pointer-events: all; 91 | } 92 | } 93 | 94 | &__header-wrap--has-drag-handle { 95 | left: base(0.875); 96 | } 97 | 98 | &--collapsed { 99 | .collapsible__toggle { 100 | border-bottom-right-radius: $style-radius-m; 101 | border-bottom-left-radius: $style-radius-m; 102 | } 103 | } 104 | 105 | &__actions-wrap { 106 | position: absolute; 107 | right: 12px; 108 | top: 7px; 109 | pointer-events: none; 110 | display: flex; 111 | } 112 | 113 | &__actions { 114 | pointer-events: all; 115 | } 116 | 117 | &__indicator { 118 | padding: calc(var(--base) / 4); 119 | display: flex; 120 | align-items: flex-start; 121 | } 122 | 123 | &__content { 124 | background-color: var(--theme-elevation-0); 125 | border-bottom-left-radius: $style-radius-m; 126 | border-bottom-right-radius: $style-radius-m; 127 | padding: var(--base); 128 | } 129 | 130 | @include small-break { 131 | &__content { 132 | padding: var(--gutter-h); 133 | } 134 | } 135 | } 136 | 137 | html[data-theme='dark'] { 138 | .collapsible { 139 | &--style-error { 140 | border: 1px solid var(--theme-error-400); 141 | &:hover { 142 | border: 1px solid var(--theme-error-500); 143 | } 144 | 145 | > .collapsible__toggle-wrap { 146 | .row-label { 147 | color: var(--theme-error-500); 148 | } 149 | .collapsible__toggle { 150 | background: var(--theme-error-100); 151 | } 152 | } 153 | &.collapsible--hovered { 154 | > .collapsible__toggle-wrap .collapsible__toggle { 155 | background: var(--theme-error-150); 156 | } 157 | } 158 | } 159 | } 160 | } 161 | 162 | html[data-theme='light'] { 163 | .collapsible { 164 | &--style-error { 165 | border: 1px solid var(--theme-error-500); 166 | &:hover { 167 | border: 1px solid var(--theme-error-600); 168 | } 169 | 170 | > .collapsible__toggle-wrap { 171 | .row-label { 172 | color: var(--theme-error-750); 173 | } 174 | .collapsible__toggle { 175 | background: var(--theme-error-50); 176 | } 177 | } 178 | &.collapsible--hovered { 179 | > .collapsible__toggle-wrap .collapsible__toggle { 180 | background: var(--theme-error-100); 181 | } 182 | } 183 | &.error { 184 | & input { 185 | border-color: var(--theme-error-500); 186 | } 187 | } 188 | } 189 | } 190 | } 191 | -------------------------------------------------------------------------------- /themes/dark-rabbit/compnents/elements/Button/index.scss: -------------------------------------------------------------------------------- 1 | a.btn { 2 | display: inline-block; 3 | } 4 | 5 | .btn { 6 | background: transparent; 7 | line-height: base(1); 8 | border-radius: $style-radius-m; 9 | font-size: 16px; 10 | margin-top: base(1); 11 | margin-bottom: base(1); 12 | border: 0; 13 | cursor: pointer; 14 | font-weight: 600; 15 | text-decoration: none; 16 | text-align: center; 17 | color: inherit; 18 | 19 | transition: var(--dr-fast) var(--dr-transition); 20 | transition-property: background-color, color; 21 | 22 | .btn__icon { 23 | border: 2px solid; 24 | border-radius: 100%; 25 | @include color-svg(currentColor); 26 | } 27 | 28 | &--has-tooltip { 29 | position: relative; 30 | } 31 | 32 | &--icon-style-without-border { 33 | .btn__icon { 34 | border: none; 35 | } 36 | } 37 | 38 | &--icon-style-none { 39 | .btn__icon { 40 | border: none; 41 | } 42 | } 43 | 44 | span { 45 | line-height: base(1); 46 | } 47 | 48 | span, 49 | svg { 50 | vertical-align: top; 51 | } 52 | 53 | &--size-medium { 54 | padding: base(0.5) $baseline; 55 | } 56 | 57 | &--size-small { 58 | padding: base(0.5) base(1); 59 | } 60 | 61 | &--style-primary { 62 | background-color: var(--dr--primary); 63 | color: var(--theme-elevation-0); 64 | 65 | &.btn--disabled { 66 | background-color: var(--dr--primary-subdued); 67 | } 68 | 69 | &:not(.btn--disabled) { 70 | &:hover, 71 | &:focus-visible { 72 | background: var(--dr--primary-accent); 73 | } 74 | 75 | &:active { 76 | background: var(--dr--primary-accent); 77 | } 78 | } 79 | 80 | &:focus:not(:focus-visible) { 81 | box-shadow: $focus-box-shadow; 82 | outline: none; 83 | } 84 | } 85 | 86 | &--style-secondary { 87 | $base-box-shadow: inset 0 0 0 $style-stroke-width var(--theme-elevation-800); 88 | $hover-box-shadow: inset 0 0 0 $style-stroke-width var(--theme-elevation-700); 89 | 90 | box-shadow: none; 91 | color: var(--theme-elevation-800); 92 | background: var(--theme-elevation-150); 93 | backdrop-filter: blur(5px); 94 | 95 | &:hover, 96 | &:focus-visible { 97 | background: var(--theme-elevation-200); 98 | box-shadow: none; 99 | } 100 | 101 | &:active { 102 | background: var(--theme-elevation-200); 103 | } 104 | 105 | &.btn--disabled { 106 | color: var(--theme-elevation-400); 107 | background: var(--theme-elevation-150); 108 | // box-shadow: inset 0 0 0 $style-stroke-width var(--theme-elevation-400); 109 | box-shadow: none; 110 | } 111 | 112 | &:focus:not(:focus-visible) { 113 | outline: none; 114 | // box-shadow: $hover-box-shadow, $focus-box-shadow; 115 | box-shadow: none; 116 | background: var(--theme-elevation-200); 117 | } 118 | } 119 | 120 | &--style-none { 121 | padding: 0; 122 | margin: 0; 123 | border-radius: 0; 124 | 125 | &:focus { 126 | opacity: 0.8; 127 | } 128 | 129 | &:active { 130 | opacity: 0.7; 131 | } 132 | } 133 | 134 | &--round { 135 | border-radius: 100%; 136 | } 137 | 138 | [dir='rtl'] &--icon { 139 | span { 140 | margin-left: 5px; 141 | } 142 | } 143 | 144 | &--icon { 145 | span { 146 | display: flex; 147 | justify-content: space-between; 148 | } 149 | 150 | &.btn--style-primary { 151 | .icon { 152 | @include color-svg(var(--theme-elevation-0)); 153 | } 154 | } 155 | } 156 | 157 | &--style-icon-label { 158 | padding: 0; 159 | font-weight: 600; 160 | } 161 | 162 | &--style-light-gray { 163 | box-shadow: inset 0 0 0 $style-stroke-width var(--theme-elevation-800); 164 | } 165 | 166 | &--icon-position-left { 167 | .btn__content { 168 | flex-direction: row-reverse; 169 | } 170 | 171 | .btn__icon { 172 | margin-right: base(0.5); 173 | } 174 | } 175 | 176 | &--icon-position-right { 177 | .btn__icon { 178 | margin-left: base(0.5); 179 | } 180 | } 181 | 182 | &--icon-only { 183 | .btn__icon { 184 | padding: 0; 185 | margin: 0; 186 | } 187 | } 188 | 189 | &--disabled { 190 | cursor: default; 191 | } 192 | 193 | &:hover, 194 | &:focus-visible { 195 | .btn__icon { 196 | @include color-svg(var(--theme-elevation-0)); 197 | background: var(--theme-elevation-800); 198 | } 199 | } 200 | 201 | &:focus:not(:focus-visible) { 202 | .btn__icon { 203 | @include color-svg(var(--theme-elevation-800)); 204 | background: var(--theme-elevation-150); 205 | } 206 | 207 | outline: none; 208 | } 209 | 210 | &:active { 211 | .btn__icon { 212 | @include color-svg(var(--theme-elevation-0)); 213 | background: var(--theme-elevation-700); 214 | } 215 | } 216 | 217 | &:focus-visible { 218 | outline: var(--accessibility-outline); 219 | outline-offset: var(--accessibility-outline-offset); 220 | } 221 | } 222 | -------------------------------------------------------------------------------- /themes/dark-rabbit/compnents/elements/Popup/index.scss: -------------------------------------------------------------------------------- 1 | .popup { 2 | --popup-button-highlight: var(--theme-elevation-200); 3 | --popup-bg: var(--theme-input-bg); 4 | --popup-text: var(--theme-text); 5 | --popup-caret-size: 10px; 6 | --popup-x-padding: calc(var(--base) * 0.33); 7 | --popup-padding: calc(var(--base) * 0.5); 8 | position: relative; 9 | 10 | &__content { 11 | position: absolute; 12 | background: var(--popup-bg); 13 | opacity: 0; 14 | visibility: hidden; 15 | pointer-events: none; 16 | z-index: var(--z-popup); 17 | max-width: calc(100vw - #{$baseline}); 18 | color: var(--popup-text); 19 | border-radius: var(--style-radius-m); 20 | padding-left: var(--popup-padding); 21 | padding-right: var(--popup-padding); 22 | min-width: var(--popup-width, auto); 23 | background: var(--theme-elevation-100); 24 | border: 2px solid var(--theme-elevation-200); 25 | font-weight: 500; 26 | } 27 | 28 | &__hide-scrollbar { 29 | overflow: hidden; 30 | } 31 | 32 | &__scroll-container { 33 | overflow-y: auto; 34 | white-space: nowrap; 35 | width: calc(100% + var(--scrollbar-width)); 36 | padding-top: var(--popup-padding); 37 | padding-bottom: var(--popup-padding); 38 | } 39 | 40 | &__scroll-content { 41 | width: calc(100% - var(--scrollbar-width)); 42 | } 43 | 44 | &--show-scrollbar { 45 | .popup__scroll-container, 46 | .popup__scroll-content { 47 | width: 100%; 48 | } 49 | } 50 | 51 | &:focus, 52 | &:active { 53 | outline: none; 54 | } 55 | 56 | //////////////////////////////// 57 | // SIZE 58 | //////////////////////////////// 59 | 60 | &--size-small { 61 | --popup-width: 100px; 62 | .popup__content { 63 | @include shadow-m; 64 | } 65 | } 66 | 67 | &--size-medium { 68 | --popup-width: 150px; 69 | .popup__content { 70 | @include shadow-lg; 71 | } 72 | } 73 | 74 | &--size-large { 75 | --popup-width: 200px; 76 | .popup__content { 77 | @include shadow-lg; 78 | } 79 | } 80 | 81 | //////////////////////////////// 82 | // HORIZONTAL ALIGNMENT 83 | //////////////////////////////// 84 | [dir='rtl'] &--h-align-left { 85 | .popup__caret { 86 | right: var(--popup-padding); 87 | left: unset; 88 | } 89 | } 90 | &--h-align-left { 91 | .popup__caret { 92 | left: var(--popup-padding); 93 | } 94 | } 95 | &--h-align-center { 96 | .popup__content { 97 | left: 50%; 98 | transform: translateX(-50%); 99 | } 100 | 101 | .popup__caret { 102 | left: 50%; 103 | transform: translateX(-50%); 104 | } 105 | } 106 | 107 | [dir='rtl'] &--h-align-right { 108 | .popup__content { 109 | right: unset; 110 | left: 0; 111 | } 112 | 113 | .popup__caret { 114 | right: unset; 115 | left: var(--popup-padding); 116 | } 117 | } 118 | 119 | &--h-align-right { 120 | .popup__content { 121 | right: 0; 122 | } 123 | 124 | .popup__caret { 125 | right: var(--popup-padding); 126 | } 127 | } 128 | 129 | //////////////////////////////// 130 | // VERTICAL ALIGNMENT 131 | //////////////////////////////// 132 | 133 | &__caret { 134 | position: absolute; 135 | border: var(--popup-caret-size) solid transparent; 136 | display: none; 137 | } 138 | 139 | &--v-align-top { 140 | .popup__content { 141 | @include shadow-lg; 142 | bottom: calc(100% + var(--popup-caret-size)); 143 | } 144 | 145 | .popup__caret { 146 | top: calc(100% - 1px); 147 | border-top-color: var(--popup-bg); 148 | } 149 | } 150 | 151 | &--v-align-bottom { 152 | .popup__content { 153 | @include shadow-lg-top; 154 | top: calc(100% + var(--popup-caret-size)); 155 | } 156 | 157 | .popup__caret { 158 | bottom: calc(100% - 1px); 159 | border-bottom-color: var(--popup-bg); 160 | } 161 | } 162 | 163 | //////////////////////////////// 164 | // ACTIVE 165 | //////////////////////////////// 166 | 167 | &--active { 168 | .popup__content { 169 | opacity: 1; 170 | visibility: visible; 171 | pointer-events: all; 172 | } 173 | } 174 | 175 | @include mid-break { 176 | --popup-padding: calc(var(--base) * 0.25); 177 | 178 | &--h-align-center { 179 | .popup__content { 180 | left: 50%; 181 | transform: translateX(-0%); 182 | } 183 | 184 | .popup__caret { 185 | left: 50%; 186 | transform: translateX(-0%); 187 | } 188 | } 189 | 190 | &--h-align-right { 191 | .popup__content { 192 | right: 0; 193 | } 194 | 195 | .popup__caret { 196 | right: var(--popup-padding); 197 | } 198 | } 199 | 200 | &--force-h-align-left { 201 | .popup__content { 202 | left: 0; 203 | right: unset; 204 | transform: unset; 205 | } 206 | 207 | .popup__caret { 208 | left: var(--popup-padding); 209 | right: unset; 210 | transform: unset; 211 | } 212 | } 213 | 214 | &--force-h-align-right { 215 | .popup__content { 216 | right: 0; 217 | left: unset; 218 | transform: unset; 219 | } 220 | 221 | .popup__caret { 222 | right: var(--popup-padding); 223 | left: unset; 224 | transform: unset; 225 | } 226 | } 227 | } 228 | } 229 | -------------------------------------------------------------------------------- /themes/dark-rabbit/compnents/elements/DocumentControls/index.scss: -------------------------------------------------------------------------------- 1 | .doc-controls { 2 | @include blur-bg-light; 3 | position: sticky; 4 | top: 0; 5 | width: 100%; 6 | z-index: 2; 7 | display: flex; 8 | align-items: center; 9 | 10 | &__divider { 11 | content: ''; 12 | display: block; 13 | position: absolute; 14 | height: 2px; 15 | background: var(--theme-elevation-100); 16 | width: 100%; 17 | left: 0; 18 | top: 100%; 19 | } 20 | 21 | &__wrapper { 22 | position: relative; 23 | width: 100%; 24 | display: flex; 25 | align-items: center; 26 | gap: var(--base); 27 | padding-bottom: 2px; 28 | z-index: 1; 29 | height: var(--doc-controls-height); 30 | } 31 | 32 | &__content { 33 | display: flex; 34 | align-items: center; 35 | flex-grow: 1; 36 | overflow: hidden; 37 | } 38 | 39 | &__meta { 40 | flex-grow: 1; 41 | display: flex; 42 | list-style: none; 43 | padding: 0; 44 | gap: var(--base); 45 | margin: 0; 46 | width: 100%; 47 | } 48 | 49 | &__list-item { 50 | display: flex; 51 | align-items: center; 52 | margin: 0; 53 | } 54 | 55 | &__value-wrap { 56 | overflow: hidden; 57 | } 58 | 59 | &__value { 60 | overflow: hidden; 61 | text-overflow: ellipsis; 62 | white-space: nowrap; 63 | margin: 0; 64 | font-weight: 600; 65 | } 66 | 67 | &__label { 68 | color: var(--theme-elevation-500); 69 | white-space: nowrap; 70 | margin: 0; 71 | } 72 | 73 | &__controls-wrapper { 74 | --controls-gap: calc(var(--base) / 2); 75 | --dot-button-width: calc(var(--base) * 2); 76 | display: flex; 77 | align-items: center; 78 | margin: 0; 79 | gap: var(--controls-gap); 80 | position: relative; 81 | } 82 | 83 | &__controls { 84 | display: flex; 85 | align-items: center; 86 | margin: 0; 87 | gap: calc(var(--base) / 2); 88 | 89 | button { 90 | margin: 0; 91 | white-space: nowrap; 92 | } 93 | } 94 | 95 | &__dots { 96 | margin: 0; 97 | display: flex; 98 | align-items: center; 99 | justify-content: center; 100 | flex-direction: column; 101 | gap: 2px; 102 | border: 2px solid var(--theme-elevation-100); 103 | border-radius: $style-radius-m; 104 | height: calc(var(--base) * 1.5); 105 | width: calc(var(--base) * 1.5); 106 | 107 | &:hover { 108 | border: 2px solid var(--theme-elevation-500); 109 | background-color: var(--theme-elevation-100); 110 | } 111 | 112 | > div { 113 | width: 3px; 114 | height: 3px; 115 | border-radius: 100%; 116 | background-color: currentColor; 117 | } 118 | } 119 | 120 | &__popup { 121 | position: relative; 122 | } 123 | 124 | .popup--active { 125 | .doc-controls { 126 | &__dots { 127 | border: 1px solid var(--theme-elevation-500); 128 | background-color: var(--theme-elevation-100); 129 | } 130 | } 131 | } 132 | 133 | .popup__trigger-wrap { 134 | display: flex; 135 | } 136 | 137 | @include mid-break { 138 | // On mobile, only stick the controls to the top 139 | // The timestamps and meta can scroll past 140 | // The same container needs to the sticky, though 141 | // So we use a static height with a negative top equal to the meta height plus top padding 142 | top: calc(var(--base) * -2); 143 | padding-right: 0; 144 | padding-left: 0; 145 | 146 | &__wrapper { 147 | flex-direction: column; 148 | gap: 0; 149 | height: unset; 150 | } 151 | 152 | &__content { 153 | width: 100%; 154 | overflow: auto; 155 | height: calc(var(--base) * 2); 156 | 157 | // this container has a fixed height 158 | // this means the scrollbar (when present) overlaps the content 159 | &::-webkit-scrollbar { 160 | display: none; 161 | } 162 | } 163 | 164 | &__meta { 165 | width: auto; 166 | gap: calc(var(--base) / 2); 167 | margin-left: var(--gutter-h); 168 | 169 | &::after { 170 | content: ''; 171 | display: block; 172 | position: sticky; 173 | right: 0; 174 | width: calc(var(--base) * 2); 175 | height: var(--base); 176 | background: linear-gradient(to right, transparent, var(--theme-bg)); 177 | flex-shrink: 0; 178 | z-index: 1111; 179 | pointer-events: none; 180 | } 181 | } 182 | 183 | &__controls-wrapper { 184 | width: 100%; 185 | transform: translate3d(0, 0, 0); 186 | padding-right: var(--gutter-h); 187 | justify-content: space-between; 188 | height: var(--doc-controls-height); 189 | border-top: 1px solid var(--theme-elevation-100); 190 | } 191 | 192 | &__controls { 193 | padding-left: var(--gutter-h); 194 | overflow: auto; 195 | 196 | // do not show scrollbar because the parent container has a static height 197 | // this container has a gradient overlay as visual indication of `overflow: scroll` 198 | &::-webkit-scrollbar { 199 | display: none; 200 | } 201 | 202 | &::after { 203 | content: ''; 204 | display: block; 205 | position: sticky; 206 | right: 0; 207 | width: calc(var(--base) * 2); 208 | height: calc(var(--base) * 1.5); 209 | background: linear-gradient(to right, transparent, var(--theme-bg)); 210 | flex-shrink: 0; 211 | z-index: 1111; 212 | pointer-events: none; 213 | } 214 | } 215 | } 216 | } 217 | -------------------------------------------------------------------------------- /themes/dark-rabbit/scss/vars.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:math'; 2 | 3 | ///////////////////////////// 4 | // BREAKPOINTS 5 | ///////////////////////////// 6 | 7 | $breakpoint-xs-width: 400px !default; 8 | $breakpoint-s-width: 768px !default; 9 | $breakpoint-m-width: 1024px !default; 10 | $breakpoint-l-width: 1440px !default; 11 | 12 | ////////////////////////////// 13 | // BASELINE GRID 14 | ////////////////////////////// 15 | 16 | $baseline-px: 25px !default; 17 | $baseline-body-size: 14px; 18 | $baseline: math.div($baseline-px, $baseline-body-size) + rem; 19 | 20 | @function base($multiplier) { 21 | @return (math.div($baseline-px, $baseline-body-size) * $multiplier) + rem; 22 | } 23 | 24 | ////////////////////////////// 25 | // FONTS (DEPRECATED. DO NOT USE. PREFER CSS VARIABLES) 26 | ////////////////////////////// 27 | 28 | $font-body: 'Inter Variable'; 29 | $font-mono: monospace !default; 30 | 31 | ////////////////////////////// 32 | // COLORS (DEPRECATED. DO NOT USE. PREFER CSS VARIABLES) 33 | ////////////////////////////// 34 | 35 | $color-dark-gray: #333333 !default; 36 | $color-gray: #9a9a9a !default; 37 | $color-light-gray: #dadada !default; 38 | $color-background-gray: #f3f3f3 !default; 39 | $color-red: #e35169; 40 | $color-yellow: #ffa439; 41 | $color-green: #2ecda7; 42 | $color-purple: #ff99dd; 43 | 44 | ////////////////////////////// 45 | // STYLES 46 | ////////////////////////////// 47 | 48 | $style-radius-s: 3px !default; 49 | $style-radius-m: 8px; 50 | $style-radius-l: 9px !default; 51 | $style-stroke-width: 2px; 52 | 53 | $style-stroke-width-s: 1px !default; 54 | $style-stroke-width-m: 2px !default; 55 | 56 | ////////////////////////////// 57 | // MISC 58 | ////////////////////////////// 59 | 60 | $top-header-offset: calc(var(--base) - 1px); 61 | $top-header-offset-m: calc(var(--base) * 3); 62 | $focus-box-shadow: 0 0 0 $style-stroke-width-m var(--theme-success-500); 63 | 64 | ////////////////////////////// 65 | // SHADOWS 66 | ////////////////////////////// 67 | 68 | @mixin shadow-sm { 69 | box-shadow: 0 2px 3px 0 rgba(0, 2, 4, 0.05), 0 10px 4px -8px rgba(0, 2, 4, 0.02); 70 | } 71 | 72 | @mixin shadow-m { 73 | box-shadow: 0 0 30px 0 rgb(0 2 4 / 12%), 0 30px 25px -8px rgb(0 2 4 / 10%); 74 | } 75 | 76 | @mixin shadow-lg { 77 | box-shadow: 0 20px 35px -10px rgba(0, 2, 4, 0.2), 0 6px 4px -4px rgba(0, 2, 4, 0.02); 78 | } 79 | 80 | @mixin shadow-lg-top { 81 | box-shadow: 0 -20px 35px -10px rgba(0, 2, 4, 0.2), 0 -6px 4px -4px rgba(0, 2, 4, 0.02); 82 | } 83 | 84 | @mixin shadow { 85 | box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07); 86 | 87 | &:hover { 88 | box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); 89 | } 90 | } 91 | 92 | @mixin inputShadowActive { 93 | box-shadow: 0 2px 3px 0 rgba(0, 2, 4, 0.16), 0 6px 4px -4px rgba(0, 2, 4, 0.13); 94 | } 95 | 96 | @mixin inputShadow { 97 | //@include shadow-sm; 98 | box-shadow: none; 99 | 100 | &:not(:disabled) { 101 | &:hover { 102 | //box-shadow: 0 2px 3px 0 rgba(0, 2, 4, 0.13), 0 6px 4px -4px rgba(0, 2, 4, 0.1); 103 | box-shadow: none; 104 | } 105 | 106 | &:active, 107 | &:focus-within, 108 | &:focus { 109 | @include inputShadowActive; 110 | } 111 | } 112 | } 113 | 114 | @mixin soft-shadow-bottom { 115 | box-shadow: 0 7px 14px 0px rgb(0 0 0 / 5%); 116 | } 117 | 118 | ////////////////////////////// 119 | // STYLE MIXINS 120 | ////////////////////////////// 121 | 122 | @mixin blur-bg($color: var(--theme-bg), $opacity: 0.75) { 123 | &:before, 124 | &:after { 125 | content: ' '; 126 | position: absolute; 127 | top: 0; 128 | right: 0; 129 | bottom: 0; 130 | left: 0; 131 | } 132 | 133 | &:before { 134 | background: $color; 135 | opacity: $opacity; 136 | } 137 | 138 | &:after { 139 | backdrop-filter: blur(8px); 140 | } 141 | } 142 | 143 | @mixin blur-bg-light { 144 | @include blur-bg(var(--theme-bg), 0.3); 145 | } 146 | 147 | @mixin formInput() { 148 | @include inputShadow; 149 | font-family: var(--font-body); 150 | font-weight: 500; 151 | width: 100%; 152 | border: 2px solid var(--theme-elevation-150); 153 | background: var(--theme-input-bg); 154 | color: var(--theme-elevation-800); 155 | border-radius: var(--style-radius-m); 156 | font-size: 15px; 157 | height: base(2.2); 158 | line-height: base(1); 159 | padding: base(0.5) base(0.75); 160 | -webkit-appearance: none; 161 | 162 | transition: var(--dr-fast) var(--dr-transition); 163 | transition-property: border-color, box-shadow; 164 | 165 | &[data-rtl='true'] { 166 | direction: rtl; 167 | } 168 | 169 | &::-webkit-input-placeholder { 170 | color: var(--theme-elevation-400); 171 | font-weight: normal; 172 | font-size: 1rem; 173 | } 174 | 175 | &::-moz-placeholder { 176 | color: var(--theme-elevation-400); 177 | font-weight: normal; 178 | font-size: 1rem; 179 | } 180 | 181 | &:hover { 182 | border-color: var(--theme-elevation-250); 183 | } 184 | 185 | &:focus, 186 | &:focus-within, 187 | &:active { 188 | border-color: var(--dr--primary); 189 | box-shadow: 0 0 16px -8px var(--dr--primary) !important; 190 | outline: 0; 191 | } 192 | 193 | &:disabled { 194 | background: var(--theme-elevation-50); 195 | color: var(--theme-elevation-450); 196 | 197 | &:hover { 198 | border-color: var(--theme-elevation-150); 199 | } 200 | } 201 | } 202 | 203 | @mixin lightInputError { 204 | background-color: var(--theme-error-50); 205 | border: 1px solid var(--theme-error-500); 206 | } 207 | 208 | @mixin darkInputError { 209 | background-color: var(--theme-error-100); 210 | border: 1px solid var(--theme-error-400); 211 | 212 | &:hover { 213 | border-color: var(--theme-error-500); 214 | } 215 | } 216 | -------------------------------------------------------------------------------- /themes/dark-rabbit/compnents/elements/DatePicker/index.scss: -------------------------------------------------------------------------------- 1 | $cal-icon-width: 18px; 2 | 3 | [dir='rtl'] { 4 | .date-time-picker { 5 | .react-datepicker__input-container input { 6 | padding-right: base(3.4); 7 | } 8 | } 9 | } 10 | 11 | .date-time-picker { 12 | .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box, 13 | .react-datepicker__time-container { 14 | width: 120px; 15 | } 16 | 17 | &__icon-wrap { 18 | position: relative; 19 | z-index: 1; 20 | } 21 | 22 | .icon--calendar, 23 | &__clear-button { 24 | position: absolute; 25 | } 26 | 27 | .icon--calendar, 28 | .icon--x { 29 | @include color-svg(var(--theme-elevation-800)); 30 | height: auto; 31 | } 32 | 33 | &__clear-button { 34 | top: base(0.5); 35 | right: base(2); 36 | } 37 | 38 | .icon--calendar { 39 | top: base(0.625); 40 | right: base(0.75); 41 | width: $cal-icon-width; 42 | pointer-events: none; 43 | } 44 | 45 | .icon--x { 46 | width: base(1); 47 | } 48 | 49 | &__clear-button { 50 | appearance: none; 51 | background-color: transparent; 52 | border: none; 53 | outline: none; 54 | padding: 0; 55 | cursor: pointer; 56 | } 57 | 58 | &__appearance--timeOnly { 59 | .react-datepicker { 60 | width: 100%; 61 | 62 | &__month-container, 63 | &__navigation--previous, 64 | &__navigation--next { 65 | display: none; 66 | visibility: hidden; 67 | } 68 | 69 | &-popper, 70 | &__time-container, 71 | &__time-box { 72 | width: base(6); 73 | } 74 | 75 | &__time-container { 76 | .react-datepicker__time { 77 | .react-datepicker__time-box { 78 | width: 100%; 79 | } 80 | } 81 | } 82 | } 83 | } 84 | 85 | .react-datepicker-wrapper { 86 | display: block; 87 | } 88 | 89 | .react-datepicker-wrapper, 90 | .react-datepicker__input-container { 91 | width: 100%; 92 | } 93 | 94 | .react-datepicker__input-container input { 95 | @include formInput; 96 | border: 2px solid var(--theme-elevation-150) !important; 97 | border-radius: var(--style-radius-m) !important; 98 | padding-right: calc(#{base(0.75)} + #{$cal-icon-width}); 99 | 100 | &:focus { 101 | border-color: var(--dr-project-color) !important; 102 | } 103 | } 104 | 105 | &--has-error { 106 | .react-datepicker__input-container input { 107 | background-color: var(--theme-error-200); 108 | } 109 | } 110 | 111 | .react-datepicker { 112 | @include shadow-lg; 113 | border: 1px solid var(--theme-elevation-100); 114 | background: var(--theme-input-bg); 115 | display: inline-flex; 116 | font-family: var(--font-body); 117 | font-weight: 100; 118 | border-radius: 0; 119 | color: var(--theme-elevation-800); 120 | border: 2px solid var(--theme-elevation-150) !important; 121 | border-radius: var(--style-radius-m) !important; 122 | 123 | &__header { 124 | padding-top: 0; 125 | text-transform: none; 126 | text-align: center; 127 | border-radius: var(--style-radius-m) !important; 128 | border: none; 129 | background-color: var(--theme-input-bg); 130 | 131 | &--time { 132 | padding: 10px 0; 133 | border-bottom: 1px solid var(--theme-elevation-150); 134 | font-weight: 600; 135 | } 136 | } 137 | 138 | &__navigation { 139 | background: none; 140 | line-height: 1.7rem; 141 | text-align: center; 142 | cursor: pointer; 143 | position: absolute; 144 | top: 10px; 145 | width: 0; 146 | padding: 0; 147 | border: 0.45rem solid transparent; 148 | z-index: 1; 149 | height: 10px; 150 | width: 10px; 151 | text-indent: -999em; 152 | overflow: hidden; 153 | top: 15px; 154 | 155 | &--next { 156 | border-left-color: var(--theme-elevation-400); 157 | 158 | &:focus { 159 | border-left-color: var(--theme-elevation-500); 160 | outline: none; 161 | } 162 | } 163 | 164 | &--previous { 165 | border-right-color: var(--theme-elevation-400); 166 | 167 | &:focus { 168 | border-right-color: var(--theme-elevation-500); 169 | outline: none; 170 | } 171 | } 172 | } 173 | 174 | &__current-month, 175 | &__header, 176 | &-year-header, 177 | &__day-name, 178 | &__day, 179 | &__time-name, 180 | &-time__header { 181 | color: var(--theme-elevation-1000); 182 | } 183 | 184 | &__current-month { 185 | display: none; 186 | } 187 | 188 | &__header__dropdown, 189 | &-year-header { 190 | padding: 10px 0; 191 | font-weight: bold; 192 | } 193 | 194 | &__month-container { 195 | border-right: none !important; 196 | } 197 | 198 | &__time { 199 | background: none; 200 | } 201 | 202 | &__time-container { 203 | border-left: none; 204 | } 205 | 206 | &__month-text { 207 | &:hover { 208 | background: var(--theme-elevation-100); 209 | } 210 | } 211 | 212 | &__month-select, 213 | &__year-select { 214 | min-width: 70px; 215 | border: none; 216 | background: none; 217 | outline: none; 218 | cursor: pointer; 219 | 220 | option { 221 | background-color: var(--theme-elevation-50); 222 | } 223 | } 224 | 225 | &__day-names { 226 | background-color: var(--theme-elevation-100); 227 | font-weight: 600; 228 | } 229 | 230 | &__day { 231 | box-shadow: inset 0px 0px 0px 1px var(--theme-elevation-150); 232 | font-size: base(0.55); 233 | font-weight: 500; 234 | border-radius: var(--style-radius-m); 235 | 236 | &:hover { 237 | background: var(--theme-elevation-100); 238 | border-radius: var(--style-radius-m) !important; 239 | } 240 | 241 | &:focus { 242 | outline: 0; 243 | background: var(--theme-elevation-400); 244 | border-radius: var(--style-radius-m) !important; 245 | } 246 | 247 | &--selected { 248 | font-weight: bold; 249 | border-radius: var(--style-radius-m) !important; 250 | 251 | &:focus { 252 | background-color: var(--theme-elevation-150); 253 | border-radius: var(--style-radius-m) !important; 254 | } 255 | } 256 | 257 | &--keyboard-selected { 258 | color: var(--theme-elevation-0); 259 | font-weight: bold; 260 | 261 | &:focus { 262 | background-color: var(--theme-elevation-150); 263 | box-shadow: inset 0px 0px 0px 1px var(--theme-elevation-800), 264 | 0px 0px 0px 1px var(--theme-elevation-800); 265 | } 266 | } 267 | 268 | &--today { 269 | font-weight: bold; 270 | } 271 | } 272 | 273 | &__day, 274 | &__day-name { 275 | width: base(1.5); 276 | margin: base(0.15); 277 | line-height: base(1.25); 278 | } 279 | } 280 | 281 | .react-datepicker-popper { 282 | z-index: 10; 283 | border: none; 284 | } 285 | 286 | .react-datepicker__time-container 287 | .react-datepicker__time 288 | .react-datepicker__time-box 289 | ul.react-datepicker__time-list { 290 | max-height: 100%; 291 | } 292 | 293 | .react-datepicker__day--keyboard-selected, 294 | .react-datepicker__month-text--keyboard-selected, 295 | .react-datepicker__time-container 296 | .react-datepicker__time 297 | .react-datepicker__time-box 298 | ul.react-datepicker__time-list 299 | li.react-datepicker__time-list-item--selected { 300 | box-shadow: none; 301 | background-color: var(--theme-elevation-150); 302 | font-weight: bold; 303 | color: var(--theme-elevation-800); 304 | border-radius: var(--style-radius-m) !important; 305 | } 306 | 307 | .react-datepicker__time-container 308 | .react-datepicker__time 309 | .react-datepicker__time-box 310 | ul.react-datepicker__time-list 311 | li.react-datepicker__time-list-item--selected, 312 | .react-datepicker__day--selected, 313 | .react-datepicker__day--in-selecting-range, 314 | .react-datepicker__day--in-range, 315 | .react-datepicker__month-text--selected, 316 | .react-datepicker__month-text--in-selecting-range, 317 | .react-datepicker__month-text--in-range { 318 | box-shadow: none; 319 | background-color: var(--theme-elevation-150); 320 | color: var(--theme-elevation-800); 321 | font-weight: bold; 322 | border-radius: 0; 323 | } 324 | 325 | .react-datepicker__time-container 326 | .react-datepicker__time 327 | .react-datepicker__time-box 328 | ul.react-datepicker__time-list 329 | li.react-datepicker__time-list-item:hover { 330 | background: var(--theme-elevation-100); 331 | } 332 | 333 | .react-datepicker__day:hover, 334 | .react-datepicker__month-text:hover { 335 | border-radius: var(--style-radius-m); 336 | } 337 | 338 | .react-datepicker__navigation--next--with-time:not( 339 | .react-datepicker__navigation--next--with-today-button 340 | ) { 341 | right: 130px; 342 | } 343 | 344 | .react-datepicker__time-container 345 | .react-datepicker__time 346 | .react-datepicker__time-box 347 | ul.react-datepicker__time-list 348 | li.react-datepicker__time-list-item { 349 | line-height: 20px; 350 | font-size: base(0.5); 351 | } 352 | 353 | &__appearance--dayOnly, 354 | &__appearance--monthOnly { 355 | .react-datepicker { 356 | &__month-container { 357 | border-right: none; 358 | } 359 | } 360 | } 361 | 362 | @include small-break { 363 | .react-datepicker { 364 | flex-direction: column; 365 | } 366 | .react-datepicker__month-container { 367 | border-right: 0; 368 | } 369 | .react-datepicker__time-container { 370 | width: auto; 371 | } 372 | .react-datepicker__header--time { 373 | background-color: var(--theme-elevation-100); 374 | padding: 8px 0; 375 | border-bottom: none; 376 | } 377 | .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box { 378 | height: 120px; 379 | width: unset; 380 | > ul { 381 | height: 120px; 382 | } 383 | } 384 | .react-datepicker__navigation--next--with-time:not( 385 | .react-datepicker__navigation--next--with-today-button 386 | ) { 387 | right: 0px; 388 | } 389 | &__input-wrapper { 390 | .icon { 391 | top: calc(50% - #{base(0.25)}); 392 | } 393 | } 394 | } 395 | } 396 | -------------------------------------------------------------------------------- /themes/dark-rabbit/scss/colors.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | --color-base-0: rgb(255, 255, 255); 3 | --color-base-50: rgb(245, 245, 245); 4 | --color-base-100: rgb(235, 235, 235); 5 | --color-base-150: rgb(221, 221, 221); 6 | --color-base-200: rgb(208, 208, 208); 7 | --color-base-250: rgb(195, 195, 195); 8 | --color-base-300: rgb(181, 181, 181); 9 | --color-base-350: rgb(168, 168, 168); 10 | --color-base-400: rgb(154, 154, 154); 11 | --color-base-450: rgb(141, 141, 141); 12 | --color-base-500: rgb(128, 128, 128); 13 | --color-base-550: rgb(114, 114, 114); 14 | --color-base-600: rgb(101, 101, 101); 15 | --color-base-650: rgb(87, 87, 87); 16 | --color-base-700: rgb(74, 74, 74); 17 | --color-base-750: rgb(60, 60, 60); 18 | --color-base-800: rgb(47, 47, 47); 19 | --color-base-850: rgb(34, 34, 34); 20 | --color-base-900: rgb(20, 20, 20); 21 | --color-base-950: rgb(7, 7, 7); 22 | --color-base-1000: rgb(0, 0, 0); 23 | 24 | --color-success-50: rgb(247, 255, 251); 25 | --color-success-100: rgb(240, 255, 247); 26 | --color-success-150: rgb(232, 255, 243); 27 | --color-success-200: rgb(224, 255, 239); 28 | --color-success-250: rgb(217, 255, 235); 29 | --color-success-300: rgb(209, 255, 230); 30 | --color-success-350: rgb(201, 255, 226); 31 | --color-success-400: rgb(193, 255, 222); 32 | --color-success-450: rgb(186, 255, 218); 33 | --color-success-500: rgb(178, 255, 214); 34 | --color-success-550: rgb(160, 230, 193); 35 | --color-success-600: rgb(142, 204, 171); 36 | --color-success-650: rgb(125, 179, 150); 37 | --color-success-700: rgb(107, 153, 128); 38 | --color-success-750: rgb(89, 128, 107); 39 | --color-success-800: rgb(71, 102, 86); 40 | --color-success-850: rgb(53, 77, 64); 41 | --color-success-900: rgb(36, 51, 43); 42 | --color-success-950: rgb(18, 25, 21); 43 | 44 | --color-warning-50: rgb(255, 255, 246); 45 | --color-warning-100: rgb(255, 255, 237); 46 | --color-warning-150: rgb(254, 255, 228); 47 | --color-warning-200: rgb(254, 255, 219); 48 | --color-warning-250: rgb(254, 255, 210); 49 | --color-warning-300: rgb(254, 255, 200); 50 | --color-warning-350: rgb(254, 255, 191); 51 | --color-warning-400: rgb(253, 255, 182); 52 | --color-warning-450: rgb(253, 255, 173); 53 | --color-warning-500: rgb(253, 255, 164); 54 | --color-warning-550: rgb(228, 230, 148); 55 | --color-warning-600: rgb(202, 204, 131); 56 | --color-warning-650: rgb(177, 179, 115); 57 | --color-warning-700: rgb(152, 153, 98); 58 | --color-warning-750: rgb(127, 128, 82); 59 | --color-warning-800: rgb(101, 102, 66); 60 | --color-warning-850: rgb(76, 77, 49); 61 | --color-warning-900: rgb(51, 51, 33); 62 | --color-warning-950: rgb(25, 25, 16); 63 | 64 | --color-error-50: rgb(255, 241, 241); 65 | --color-error-100: rgb(255, 226, 228); 66 | --color-error-150: rgb(255, 212, 214); 67 | --color-error-200: rgb(255, 197, 200); 68 | --color-error-250: rgb(255, 183, 187); 69 | --color-error-300: rgb(255, 169, 173); 70 | --color-error-350: rgb(255, 154, 159); 71 | --color-error-400: rgb(255, 140, 145); 72 | --color-error-450: rgb(255, 125, 132); 73 | --color-error-500: rgb(255, 111, 118); 74 | --color-error-550: rgb(230, 100, 106); 75 | --color-error-600: rgb(204, 89, 94); 76 | --color-error-650: rgb(179, 78, 83); 77 | --color-error-700: rgb(153, 67, 71); 78 | --color-error-750: rgb(128, 56, 59); 79 | --color-error-800: rgb(102, 44, 47); 80 | --color-error-850: rgb(77, 33, 35); 81 | --color-error-900: rgb(51, 22, 24); 82 | --color-error-950: rgb(25, 11, 12); 83 | 84 | --color-blue-50: rgb(230, 247, 253); 85 | --color-blue-100: rgb(204, 238, 252); 86 | --color-blue-150: rgb(179, 230, 250); 87 | --color-blue-200: rgb(153, 221, 249); 88 | --color-blue-250: rgb(128, 213, 247); 89 | --color-blue-300: rgb(102, 204, 245); 90 | --color-blue-350: rgb(77, 196, 244); 91 | --color-blue-400: rgb(51, 187, 242); 92 | --color-blue-450: rgb(25, 179, 241); 93 | --color-blue-500: rgb(0, 170, 239); 94 | --color-blue-550: rgb(0, 153, 215); 95 | --color-blue-600: rgb(0, 136, 191); 96 | --color-blue-650: rgb(0, 119, 167); 97 | --color-blue-700: rgb(0, 102, 143); 98 | --color-blue-750: rgb(0, 85, 120); 99 | --color-blue-800: rgb(0, 68, 96); 100 | --color-blue-850: rgb(0, 51, 72); 101 | --color-blue-900: rgb(0, 34, 48); 102 | --color-blue-950: rgb(0, 17, 24); 103 | 104 | --theme-border-color: var(--theme-elevation-150); 105 | 106 | --theme-success-50: var(--color-success-50); 107 | --theme-success-100: var(--color-success-100); 108 | --theme-success-150: var(--color-success-150); 109 | --theme-success-200: var(--color-success-200); 110 | --theme-success-250: var(--color-success-250); 111 | --theme-success-300: var(--color-success-300); 112 | --theme-success-350: var(--color-success-350); 113 | --theme-success-400: var(--color-success-400); 114 | --theme-success-450: var(--color-success-450); 115 | --theme-success-500: var(--color-success-500); 116 | --theme-success-550: var(--color-success-550); 117 | --theme-success-600: var(--color-success-600); 118 | --theme-success-650: var(--color-success-650); 119 | --theme-success-700: var(--color-success-700); 120 | --theme-success-750: var(--color-success-750); 121 | --theme-success-800: var(--color-success-800); 122 | --theme-success-850: var(--color-success-850); 123 | --theme-success-900: var(--color-success-900); 124 | --theme-success-950: var(--color-success-950); 125 | 126 | --theme-warning-50: var(--color-warning-50); 127 | --theme-warning-100: var(--color-warning-100); 128 | --theme-warning-150: var(--color-warning-150); 129 | --theme-warning-200: var(--color-warning-200); 130 | --theme-warning-250: var(--color-warning-250); 131 | --theme-warning-300: var(--color-warning-300); 132 | --theme-warning-350: var(--color-warning-350); 133 | --theme-warning-400: var(--color-warning-400); 134 | --theme-warning-450: var(--color-warning-450); 135 | --theme-warning-500: var(--color-warning-500); 136 | --theme-warning-550: var(--color-warning-550); 137 | --theme-warning-600: var(--color-warning-600); 138 | --theme-warning-650: var(--color-warning-650); 139 | --theme-warning-700: var(--color-warning-700); 140 | --theme-warning-750: var(--color-warning-750); 141 | --theme-warning-800: var(--color-warning-800); 142 | --theme-warning-850: var(--color-warning-850); 143 | --theme-warning-900: var(--color-warning-900); 144 | --theme-warning-950: var(--color-warning-950); 145 | 146 | --theme-error-50: var(--color-error-50); 147 | --theme-error-100: var(--color-error-100); 148 | --theme-error-150: var(--color-error-150); 149 | --theme-error-200: var(--color-error-200); 150 | --theme-error-250: var(--color-error-250); 151 | --theme-error-300: var(--color-error-300); 152 | --theme-error-350: var(--color-error-350); 153 | --theme-error-400: var(--color-error-400); 154 | --theme-error-450: var(--color-error-450); 155 | --theme-error-500: var(--color-error-500); 156 | --theme-error-550: var(--color-error-550); 157 | --theme-error-600: var(--color-error-600); 158 | --theme-error-650: var(--color-error-650); 159 | --theme-error-700: var(--color-error-700); 160 | --theme-error-750: var(--color-error-750); 161 | --theme-error-800: var(--color-error-800); 162 | --theme-error-850: var(--color-error-850); 163 | --theme-error-900: var(--color-error-900); 164 | --theme-error-950: var(--color-error-950); 165 | 166 | --theme-elevation-0: var(--color-base-0); 167 | --theme-elevation-50: var(--color-base-50); 168 | --theme-elevation-100: var(--color-base-100); 169 | --theme-elevation-150: var(--color-base-150); 170 | --theme-elevation-200: var(--color-base-200); 171 | --theme-elevation-250: var(--color-base-250); 172 | --theme-elevation-300: var(--color-base-300); 173 | --theme-elevation-350: var(--color-base-350); 174 | --theme-elevation-400: var(--color-base-400); 175 | --theme-elevation-450: var(--color-base-450); 176 | --theme-elevation-500: var(--color-base-500); 177 | --theme-elevation-550: var(--color-base-550); 178 | --theme-elevation-600: var(--color-base-600); 179 | --theme-elevation-650: var(--color-base-650); 180 | --theme-elevation-700: var(--color-base-700); 181 | --theme-elevation-750: var(--color-base-750); 182 | --theme-elevation-800: var(--color-base-800); 183 | --theme-elevation-850: var(--color-base-850); 184 | --theme-elevation-900: var(--color-base-900); 185 | --theme-elevation-950: var(--color-base-950); 186 | --theme-elevation-1000: var(--color-base-1000); 187 | } 188 | 189 | html[data-theme='dark'] { 190 | --theme-border-color: var(--theme-elevation-150); 191 | 192 | --theme-elevation-0: var(--color-base-900); 193 | --theme-elevation-50: var(--color-base-850); 194 | --theme-elevation-100: var(--color-base-800); 195 | --theme-elevation-150: var(--color-base-750); 196 | --theme-elevation-200: var(--color-base-700); 197 | --theme-elevation-250: var(--color-base-650); 198 | --theme-elevation-300: var(--color-base-600); 199 | --theme-elevation-350: var(--color-base-550); 200 | --theme-elevation-400: var(--color-base-450); 201 | --theme-elevation-450: var(--color-base-400); 202 | --theme-elevation-550: var(--color-base-350); 203 | --theme-elevation-600: var(--color-base-300); 204 | --theme-elevation-650: var(--color-base-250); 205 | --theme-elevation-700: var(--color-base-200); 206 | --theme-elevation-750: var(--color-base-150); 207 | --theme-elevation-800: var(--color-base-100); 208 | --theme-elevation-850: var(--color-base-50); 209 | --theme-elevation-900: var(--color-base-0); 210 | --theme-elevation-950: var(--color-base-0); 211 | --theme-elevation-1000: var(--color-base-0); 212 | 213 | --theme-success-50: var(--color-success-950); 214 | --theme-success-100: var(--color-success-900); 215 | --theme-success-150: var(--color-success-850); 216 | --theme-success-200: var(--color-success-800); 217 | --theme-success-250: var(--color-success-750); 218 | --theme-success-300: var(--color-success-700); 219 | --theme-success-350: var(--color-success-650); 220 | --theme-success-400: var(--color-success-600); 221 | --theme-success-450: var(--color-success-550); 222 | --theme-success-550: var(--color-success-450); 223 | --theme-success-600: var(--color-success-400); 224 | --theme-success-650: var(--color-success-350); 225 | --theme-success-700: var(--color-success-300); 226 | --theme-success-750: var(--color-success-250); 227 | --theme-success-800: var(--color-success-200); 228 | --theme-success-850: var(--color-success-150); 229 | --theme-success-900: var(--color-success-100); 230 | --theme-success-950: var(--color-success-50); 231 | 232 | --theme-warning-50: var(--color-warning-950); 233 | --theme-warning-100: var(--color-warning-900); 234 | --theme-warning-150: var(--color-warning-850); 235 | --theme-warning-200: var(--color-warning-800); 236 | --theme-warning-250: var(--color-warning-750); 237 | --theme-warning-300: var(--color-warning-700); 238 | --theme-warning-350: var(--color-warning-650); 239 | --theme-warning-400: var(--color-warning-600); 240 | --theme-warning-450: var(--color-warning-550); 241 | --theme-warning-550: var(--color-warning-450); 242 | --theme-warning-600: var(--color-warning-400); 243 | --theme-warning-650: var(--color-warning-350); 244 | --theme-warning-700: var(--color-warning-300); 245 | --theme-warning-750: var(--color-warning-250); 246 | --theme-warning-800: var(--color-warning-200); 247 | --theme-warning-850: var(--color-warning-150); 248 | --theme-warning-900: var(--color-warning-100); 249 | --theme-warning-950: var(--color-warning-50); 250 | 251 | --theme-error-50: var(--color-error-950); 252 | --theme-error-100: var(--color-error-900); 253 | --theme-error-150: var(--color-error-850); 254 | --theme-error-200: var(--color-error-800); 255 | --theme-error-250: var(--color-error-750); 256 | --theme-error-300: var(--color-error-700); 257 | --theme-error-350: var(--color-error-650); 258 | --theme-error-400: var(--color-error-600); 259 | --theme-error-450: var(--color-error-550); 260 | --theme-error-550: var(--color-error-450); 261 | --theme-error-600: var(--color-error-400); 262 | --theme-error-650: var(--color-error-350); 263 | --theme-error-700: var(--color-error-300); 264 | --theme-error-750: var(--color-error-250); 265 | --theme-error-800: var(--color-error-200); 266 | --theme-error-850: var(--color-error-150); 267 | --theme-error-900: var(--color-error-100); 268 | --theme-error-950: var(--color-error-50); 269 | } 270 | --------------------------------------------------------------------------------