mirror of
https://github.com/makeplane/plane.git
synced 2026-02-24 04:00:14 +01:00
Merge branch 'chore/update-existing-vars' of https://github.com/makeplane/plane into chore/update-existing-vars
This commit is contained in:
Jayash Tripathy
@@ -1,54 +1,56 @@
|
||||
@reference "@plane/tailwind-config/index.css";
|
||||
|
||||
.EmojiPickerReact {
|
||||
--epr-category-navigation-button-size: 1.25rem !important;
|
||||
--epr-category-label-height: 1.5rem !important;
|
||||
--epr-emoji-size: 1.25rem !important;
|
||||
--epr-picker-border-radius: 0.25rem !important;
|
||||
--epr-horizontal-padding: 0.5rem !important;
|
||||
--epr-emoji-padding: 0.5rem !important;
|
||||
background-color: rgba(var(--color-background-100)) !important;
|
||||
}
|
||||
@layer components {
|
||||
.EmojiPickerReact {
|
||||
--epr-category-navigation-button-size: 1.25rem !important;
|
||||
--epr-category-label-height: 1.5rem !important;
|
||||
--epr-emoji-size: 1.25rem !important;
|
||||
--epr-picker-border-radius: 0.25rem !important;
|
||||
--epr-horizontal-padding: 0.5rem !important;
|
||||
--epr-emoji-padding: 0.5rem !important;
|
||||
background-color: rgba(var(--color-background-100)) !important;
|
||||
}
|
||||
|
||||
.epr-main {
|
||||
border: none !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
.epr-main {
|
||||
border: none !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
.epr-emoji-category-label {
|
||||
font-size: 0.7875rem !important;
|
||||
background-color: rgba(var(--color-background-100), 0.8) !important;
|
||||
@apply !text-tertiary;
|
||||
}
|
||||
.epr-emoji-category-label {
|
||||
font-size: 0.7875rem !important;
|
||||
background-color: rgba(var(--color-background-100), 0.8) !important;
|
||||
@apply text-tertiary!;
|
||||
}
|
||||
|
||||
.epr-category-nav,
|
||||
.epr-header-overlay {
|
||||
padding: 0.5rem !important;
|
||||
}
|
||||
.epr-category-nav,
|
||||
.epr-header-overlay {
|
||||
padding: 0.5rem !important;
|
||||
}
|
||||
|
||||
button.epr-emoji:hover > *,
|
||||
button.epr-emoji:focus > * {
|
||||
background-color: rgba(var(--color-background-80)) !important;
|
||||
}
|
||||
button.epr-emoji:hover > *,
|
||||
button.epr-emoji:focus > * {
|
||||
background-color: rgba(var(--color-background-80)) !important;
|
||||
}
|
||||
|
||||
input.epr-search {
|
||||
font-size: 0.7875rem !important;
|
||||
height: 2rem !important;
|
||||
background: transparent !important;
|
||||
@apply !border-subtle;
|
||||
border-radius: 0.25rem !important;
|
||||
}
|
||||
input.epr-search {
|
||||
font-size: 0.7875rem !important;
|
||||
height: 2rem !important;
|
||||
background: transparent !important;
|
||||
@apply border-subtle!;
|
||||
border-radius: 0.25rem !important;
|
||||
}
|
||||
|
||||
input.epr-search::placeholder {
|
||||
@apply !text-placeholder;
|
||||
}
|
||||
input.epr-search::placeholder {
|
||||
@apply text-placeholder!;
|
||||
}
|
||||
|
||||
button.epr-btn-clear-search:hover {
|
||||
background-color: rgba(var(--color-background-80)) !important;
|
||||
@apply !text-tertiary;
|
||||
}
|
||||
button.epr-btn-clear-search:hover {
|
||||
background-color: rgba(var(--color-background-80)) !important;
|
||||
@apply text-tertiary!;
|
||||
}
|
||||
|
||||
.epr-emoji-variation-picker {
|
||||
background-color: rgba(var(--color-background-100)) !important;
|
||||
@apply !border-subtle-1;
|
||||
.epr-emoji-variation-picker {
|
||||
background-color: rgba(var(--color-background-100)) !important;
|
||||
@apply border-subtle-1!;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -124,16 +124,16 @@
|
||||
}
|
||||
|
||||
.epr-search-container > input {
|
||||
@apply !bg-surface-2 !text-primary;
|
||||
@apply bg-surface-2! text-primary!;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.epr-search-container > input::placeholder {
|
||||
@apply !text-placeholder;
|
||||
@apply text-placeholder!;
|
||||
}
|
||||
|
||||
.epr-search-container > .epr-icn-search {
|
||||
@apply !text-placeholder;
|
||||
@apply text-placeholder!;
|
||||
}
|
||||
|
||||
/* Lock icon animations */
|
||||
|
||||
@@ -1,39 +1,41 @@
|
||||
@reference "@plane/tailwind-config/index.css";
|
||||
|
||||
[cmdk-group] {
|
||||
padding-left: 0.45rem;
|
||||
padding-right: 0.45rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
@layer components {
|
||||
[cmdk-group] {
|
||||
padding-left: 0.45rem;
|
||||
padding-right: 0.45rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
[cmdk-group-heading] {
|
||||
@apply text-tertiary;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.5rem;
|
||||
padding-left: 0.45rem;
|
||||
padding-right: 0.45rem;
|
||||
}
|
||||
[cmdk-group-heading] {
|
||||
@apply text-tertiary;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.5rem;
|
||||
padding-left: 0.45rem;
|
||||
padding-right: 0.45rem;
|
||||
}
|
||||
|
||||
[cmdk-item] {
|
||||
@apply flex items-center justify-between cursor-pointer;
|
||||
border-radius: 0.375rem;
|
||||
padding: 0.5rem;
|
||||
font-size: 0.825rem;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
[cmdk-item] {
|
||||
border-radius: 0.375rem;
|
||||
padding: 0.5rem;
|
||||
font-size: 0.825rem;
|
||||
line-height: 1.25rem;
|
||||
@apply flex items-center justify-between cursor-pointer;
|
||||
}
|
||||
|
||||
[cmdk-item]:focus,
|
||||
[cmdk-item][aria-selected="true"] {
|
||||
@apply bg-layer-1;
|
||||
}
|
||||
[cmdk-item]:focus,
|
||||
[cmdk-item][aria-selected="true"] {
|
||||
@apply bg-layer-1;
|
||||
}
|
||||
|
||||
[cmdk-item][aria-disabled="true"],
|
||||
[cmdk-item][data-disabled="true"] {
|
||||
@apply bg-transparent opacity-50 cursor-not-allowed;
|
||||
}
|
||||
[cmdk-item][aria-disabled="true"],
|
||||
[cmdk-item][data-disabled="true"] {
|
||||
@apply bg-transparent opacity-50 cursor-not-allowed;
|
||||
}
|
||||
|
||||
[cmdk-item][aria-disabled="true"]:focus,
|
||||
[cmdk-item][data-disabled="true"]:focus {
|
||||
@apply bg-layer-1/70;
|
||||
[cmdk-item][aria-disabled="true"]:focus,
|
||||
[cmdk-item][data-disabled="true"]:focus {
|
||||
@apply bg-layer-1/70;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -84,7 +84,7 @@
|
||||
|
||||
/* Custom gap cursor styles */
|
||||
.ProseMirror-gapcursor::after {
|
||||
@apply !border-t !border-strong;
|
||||
@apply border-t! border-strong!;
|
||||
}
|
||||
|
||||
/* to-do list */
|
||||
@@ -105,7 +105,7 @@ ul[data-type="taskList"] li > div {
|
||||
}
|
||||
|
||||
ul[data-type="taskList"] li > label input[type="checkbox"] {
|
||||
@apply !border !border-strong/20;
|
||||
@apply border! border-strong/20!;
|
||||
outline: none;
|
||||
border-radius: 2px;
|
||||
transform: scale(1.05);
|
||||
@@ -151,7 +151,7 @@ ul[data-type="taskList"] li > label input[type="checkbox"] {
|
||||
width: 0.8rem;
|
||||
height: 0.8rem;
|
||||
position: relative;
|
||||
@apply !border-md !border-subtle-1;
|
||||
@apply border-md border-subtle-1;
|
||||
margin-right: 0.2rem;
|
||||
margin-top: 0.15rem;
|
||||
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import type { Preview } from "@storybook/react-vite";
|
||||
import "@plane/tailwind-config/global.css";
|
||||
import "../src/styles/react-day-picker.css";
|
||||
import "./tailwind.css";
|
||||
|
||||
const parameters: Preview["parameters"] = {
|
||||
controls: {
|
||||
|
||||
2
packages/propel/.storybook/tailwind.css
Normal file
2
packages/propel/.storybook/tailwind.css
Normal file
@@ -0,0 +1,2 @@
|
||||
@import "@plane/tailwind-config/index.css";
|
||||
@import "../src/styles/react-day-picker.css";
|
||||
@@ -51,17 +51,15 @@ export function AnimatedCounter({ count, className, size = "md" }: AnimatedCount
|
||||
key={`prev-${animationKey}`}
|
||||
className={cn(
|
||||
"absolute inset-0 flex items-center justify-center font-medium",
|
||||
"animate-[slideOut_0.25s_ease-out_forwards]",
|
||||
"animate-slide-out",
|
||||
direction === "up" && "[--slide-out-dir:-100%]",
|
||||
direction === "down" && "[--slide-out-dir:100%]",
|
||||
sizeClass
|
||||
sizeClass,
|
||||
{
|
||||
"animate-slide-out animate-fade-out": isAnimating && direction === "up",
|
||||
"animate-slide-out-down animate-fade-out": isAnimating && direction === "down",
|
||||
}
|
||||
)}
|
||||
style={{
|
||||
animation:
|
||||
direction === "up"
|
||||
? "slideOut 0.25s ease-out forwards, fadeOut 0.25s ease-out forwards"
|
||||
: "slideOutDown 0.25s ease-out forwards, fadeOut 0.25s ease-out forwards",
|
||||
}}
|
||||
>
|
||||
{prevCount}
|
||||
</span>
|
||||
@@ -72,21 +70,14 @@ export function AnimatedCounter({ count, className, size = "md" }: AnimatedCount
|
||||
key={`current-${animationKey}`}
|
||||
className={cn(
|
||||
"flex items-center justify-center font-medium",
|
||||
isAnimating && "animate-[slideIn_0.25s_ease-out_forwards]",
|
||||
!isAnimating && "opacity-100",
|
||||
sizeClass,
|
||||
{
|
||||
"animate-slide-in-from-bottom": isAnimating && direction === "up",
|
||||
"animate-slide-in-from-top": isAnimating && direction === "down",
|
||||
},
|
||||
className
|
||||
)}
|
||||
style={
|
||||
isAnimating
|
||||
? {
|
||||
animation:
|
||||
direction === "up"
|
||||
? "slideInFromBottom 0.25s ease-out forwards"
|
||||
: "slideInFromTop 0.25s ease-out forwards",
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
{displayCount}
|
||||
</span>
|
||||
|
||||
@@ -1,12 +1,14 @@
|
||||
export const ILLUSTRATION_COLOR_TOKEN_MAP = {
|
||||
fill: {
|
||||
primary: "rgba(var(--color-background-100))", // white or #fff,
|
||||
secondary: "rgba(var(--color-background-90))", // #F4F5F5
|
||||
tertiary: "rgba(var(--color-background-80))", // #E5E7E8
|
||||
primary: "var(--illustration-fill-primary)",
|
||||
secondary: "var(--illustration-fill-secondary)",
|
||||
tertiary: "var(--illustration-fill-tertiary)",
|
||||
quaternary: "var(--illustration-fill-quaternary)",
|
||||
},
|
||||
stroke: {
|
||||
primary: "rgba(var(--color-text-200))", // #1D1F20
|
||||
secondary: "var(--border-color-strong-1)",
|
||||
primary: "var(--illustration-stroke-primary)",
|
||||
secondary: "var(--illustration-stroke-secondary)",
|
||||
tertiary: "var(--illustration-stroke-tertiary)",
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@@ -1,311 +1,313 @@
|
||||
.rdp-root {
|
||||
font-size: 12px;
|
||||
@layer components {
|
||||
.rdp-root {
|
||||
font-size: 12px;
|
||||
|
||||
--rdp-cell-size: 40px;
|
||||
/* Size of the day cells. */
|
||||
--rdp-caption-font-size: 1rem;
|
||||
/* Font size for the caption labels. */
|
||||
--rdp-caption-navigation-size: 1.25rem;
|
||||
/* Font size for the caption labels. */
|
||||
--rdp-accent-color: rgba(var(--color-primary-100));
|
||||
/* Accent color for the background of selected days. */
|
||||
--rdp-background-color: rgba(var(--color-primary-100), 0.5);
|
||||
/* Background color for the hovered/focused elements. */
|
||||
--rdp-dark-background-color: rgba(var(--color-primary-300));
|
||||
/* Background color for the hovered/focused, already selected elements. */
|
||||
--rdp-outline: 2px solid var(--rdp-accent-color);
|
||||
/* Outline border for focused elements */
|
||||
--rdp-selected-color: #ffffff;
|
||||
/* Color of selected day text */
|
||||
--rdp-cell-size: 40px;
|
||||
/* Size of the day cells. */
|
||||
--rdp-caption-font-size: 1rem;
|
||||
/* Font size for the caption labels. */
|
||||
--rdp-caption-navigation-size: 1.25rem;
|
||||
/* Font size for the caption labels. */
|
||||
--rdp-accent-color: rgba(var(--color-primary-100));
|
||||
/* Accent color for the background of selected days. */
|
||||
--rdp-background-color: rgba(var(--color-primary-100), 0.5);
|
||||
/* Background color for the hovered/focused elements. */
|
||||
--rdp-dark-background-color: rgba(var(--color-primary-300));
|
||||
/* Background color for the hovered/focused, already selected elements. */
|
||||
--rdp-outline: 2px solid var(--rdp-accent-color);
|
||||
/* Outline border for focused elements */
|
||||
--rdp-selected-color: #ffffff;
|
||||
/* Color of selected day text */
|
||||
|
||||
background: transparent;
|
||||
}
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.rdp-root {
|
||||
position: relative; /* Required to position the nav. */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.rdp-root {
|
||||
position: relative; /* Required to position the nav. */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* ---------- */
|
||||
/* Day Buttons */
|
||||
/* ----------- */
|
||||
/* ---------- */
|
||||
/* Day Buttons */
|
||||
/* ----------- */
|
||||
|
||||
.rdp-day_button {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
width: var(--rdp-cell-size);
|
||||
max-width: var(--rdp-cell-size);
|
||||
height: var(--rdp-cell-size);
|
||||
margin: 0;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.rdp-day_button {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
width: var(--rdp-cell-size);
|
||||
max-width: var(--rdp-cell-size);
|
||||
height: var(--rdp-cell-size);
|
||||
margin: 0;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.rdp-day.rdp-outside:not(.rdp-selected) .rdp-day_button {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.rdp-day.rdp-outside:not(.rdp-selected) .rdp-day_button {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.rdp-day.rdp-disabled:not(.rdp-selected) .rdp-day_button {
|
||||
opacity: 0.25;
|
||||
}
|
||||
.rdp-day.rdp-disabled:not(.rdp-selected) .rdp-day_button {
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
.rdp-day:not(.rdp-disabled) .rdp-day_button {
|
||||
cursor: pointer;
|
||||
}
|
||||
.rdp-day:not(.rdp-disabled) .rdp-day_button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.rdp-day:not(.rdp-selected, .rdp-disabled) .rdp-day_button:focus-visible {
|
||||
color: inherit;
|
||||
background-color: var(--rdp-background-color);
|
||||
}
|
||||
.rdp-day:not(.rdp-selected, .rdp-disabled) .rdp-day_button:focus-visible {
|
||||
color: inherit;
|
||||
background-color: var(--rdp-background-color);
|
||||
}
|
||||
|
||||
.rdp-selected:not(.rdp-range_middle, .rdp-disabled) .rdp-day_button:focus-visible {
|
||||
outline: var(--rdp-outline);
|
||||
outline-offset: 2px;
|
||||
background-color: var(--rdp-dark-background-color);
|
||||
outline-width: thin;
|
||||
}
|
||||
.rdp-selected:not(.rdp-range_middle, .rdp-disabled) .rdp-day_button:focus-visible {
|
||||
outline: var(--rdp-outline);
|
||||
outline-offset: 2px;
|
||||
background-color: var(--rdp-dark-background-color);
|
||||
outline-width: thin;
|
||||
}
|
||||
|
||||
.rdp-day:not(.rdp-disabled) .rdp-day_button:hover {
|
||||
background-color: var(--rdp-background-color);
|
||||
}
|
||||
.rdp-day:not(.rdp-disabled) .rdp-day_button:hover {
|
||||
background-color: var(--rdp-background-color);
|
||||
}
|
||||
|
||||
.rdp-selected .rdp-day_button {
|
||||
background-color: var(--rdp-accent-color);
|
||||
border-radius: 50%;
|
||||
color: var(--rdp-selected-color);
|
||||
z-index: 1;
|
||||
}
|
||||
.rdp-selected .rdp-day_button {
|
||||
background-color: var(--rdp-accent-color);
|
||||
border-radius: 50%;
|
||||
color: var(--rdp-selected-color);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.rdp-selected .rdp-day_button:hover:not(.rdp-disabled) {
|
||||
background-color: var(--rdp-dark-background-color);
|
||||
}
|
||||
.rdp-selected .rdp-day_button:hover:not(.rdp-disabled) {
|
||||
background-color: var(--rdp-dark-background-color);
|
||||
}
|
||||
|
||||
.rdp-week {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.rdp-week {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.rdp-today:not(.rdp-outside) {
|
||||
position: relative;
|
||||
}
|
||||
.rdp-today:not(.rdp-outside) {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.rdp-today:not(.rdp-outside)::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 2px;
|
||||
width: 0.5em;
|
||||
height: 0.5em;
|
||||
background-color: var(--rdp-background-color);
|
||||
border-radius: 100%;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
.rdp-today:not(.rdp-outside)::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 2px;
|
||||
width: 0.5em;
|
||||
height: 0.5em;
|
||||
background-color: var(--rdp-background-color);
|
||||
border-radius: 100%;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
|
||||
.rdp-selected .rdp-day_button:focus-visible,
|
||||
.rdp-selected .rdp-day_button:hover {
|
||||
color: var(--rdp-selected-color);
|
||||
opacity: 1;
|
||||
background-color: var(--rdp-accent-color);
|
||||
}
|
||||
.rdp-selected .rdp-day_button:focus-visible,
|
||||
.rdp-selected .rdp-day_button:hover {
|
||||
color: var(--rdp-selected-color);
|
||||
opacity: 1;
|
||||
background-color: var(--rdp-accent-color);
|
||||
}
|
||||
|
||||
.rdp-weekday {
|
||||
vertical-align: middle;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
font-size: 0.75em;
|
||||
height: var(--rdp-cell-size);
|
||||
padding: 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.rdp-weekday {
|
||||
vertical-align: middle;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
font-size: 0.75em;
|
||||
height: var(--rdp-cell-size);
|
||||
padding: 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* ---------- */
|
||||
/* Top Nav */
|
||||
/* ---------- */
|
||||
/* ---------- */
|
||||
/* Top Nav */
|
||||
/* ---------- */
|
||||
|
||||
.rdp-nav {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
padding: inherit;
|
||||
.rdp-nav {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
padding: inherit;
|
||||
|
||||
top: 1.2em;
|
||||
right: 1em;
|
||||
top: 1.2em;
|
||||
right: 1em;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.rdp-button_next,
|
||||
.rdp-button_previous {
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
appearance: none;
|
||||
width: var(--rdp-caption-navigation-size);
|
||||
height: var(--rdp-caption-navigation-size);
|
||||
padding: 0.25em;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.rdp-button_next,
|
||||
.rdp-button_previous {
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
appearance: none;
|
||||
width: var(--rdp-caption-navigation-size);
|
||||
height: var(--rdp-caption-navigation-size);
|
||||
padding: 0.25em;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.rdp-chevron {
|
||||
fill: rgba(var(--color-text-200));
|
||||
height: 0.75rem;
|
||||
width: 0.75rem;
|
||||
}
|
||||
.rdp-chevron {
|
||||
fill: rgba(var(--color-text-200));
|
||||
height: 0.75rem;
|
||||
width: 0.75rem;
|
||||
}
|
||||
|
||||
.rdp-button_next:hover,
|
||||
.rdp-button_previous:hover,
|
||||
.rdp-button_next:focus-visible,
|
||||
.rdp-button_previous:focus-visible {
|
||||
background-color: rgba(var(--color-background-80)) !important;
|
||||
}
|
||||
|
||||
/* ---------- */
|
||||
/* Dropdowns */
|
||||
/* ---------- */
|
||||
|
||||
.rdp-dropdowns {
|
||||
position: relative;
|
||||
/* width: 100%; */
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.rdp-dropdown {
|
||||
appearance: none;
|
||||
--webkit-appearance: none;
|
||||
--moz-appearance: none;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
opacity: 0;
|
||||
border: none;
|
||||
font-family: inherit;
|
||||
font-size: 1rem;
|
||||
line-height: inherit;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
|
||||
&:hover {
|
||||
.rdp-button_next:hover,
|
||||
.rdp-button_previous:hover,
|
||||
.rdp-button_next:focus-visible,
|
||||
.rdp-button_previous:focus-visible {
|
||||
background-color: rgba(var(--color-background-80)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.rdp-dropdown_root {
|
||||
margin: 0;
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
/* ---------- */
|
||||
/* Dropdowns */
|
||||
/* ---------- */
|
||||
|
||||
.rdp-months_dropdown {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.rdp-dropdown[data-disabled="true"] {
|
||||
opacity: unset;
|
||||
color: unset;
|
||||
}
|
||||
|
||||
.rdp-caption_label {
|
||||
z-index: 1;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
margin: 0;
|
||||
padding: 0 0.25em;
|
||||
white-space: nowrap;
|
||||
color: currentColor;
|
||||
border: 0;
|
||||
border: 2px solid transparent;
|
||||
font-family: inherit;
|
||||
font-size: var(--rdp-caption-font-size);
|
||||
font-weight: 600;
|
||||
background: transparent;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.rdp-dropdown:not([data-disabled="true"]) {
|
||||
&:focus-visible + .rdp-caption_label {
|
||||
border: var(--rdp-outline);
|
||||
border-radius: 6px;
|
||||
.rdp-dropdowns {
|
||||
position: relative;
|
||||
/* width: 100%; */
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
& + .rdp-caption_label {
|
||||
.rdp-dropdown {
|
||||
appearance: none;
|
||||
--webkit-appearance: none;
|
||||
--moz-appearance: none;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
opacity: 0;
|
||||
border: none;
|
||||
font-family: inherit;
|
||||
font-size: 1rem;
|
||||
line-height: inherit;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(var(--color-background-80)) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rdp-dropdown_icon {
|
||||
margin: 0 0 0 5px;
|
||||
}
|
||||
.rdp-dropdown_root {
|
||||
margin: 0;
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* --------------- */
|
||||
/* Range selection */
|
||||
/* --------------- */
|
||||
.rdp-months_dropdown {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.rdp-range_start,
|
||||
.rdp-range_middle,
|
||||
.rdp-range_end {
|
||||
position: relative;
|
||||
}
|
||||
.rdp-dropdown[data-disabled="true"] {
|
||||
opacity: unset;
|
||||
color: unset;
|
||||
}
|
||||
|
||||
.rdp-range_start::before,
|
||||
.rdp-range_middle::before,
|
||||
.rdp-range_end::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
background-color: var(--rdp-background-color);
|
||||
top: 50%;
|
||||
height: 100%;
|
||||
width: 50%;
|
||||
transform: translate(0, -50%);
|
||||
z-index: -1;
|
||||
}
|
||||
.rdp-caption_label {
|
||||
z-index: 1;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
margin: 0;
|
||||
padding: 0 0.25em;
|
||||
white-space: nowrap;
|
||||
color: currentColor;
|
||||
border: 0;
|
||||
border: 2px solid transparent;
|
||||
font-family: inherit;
|
||||
font-size: var(--rdp-caption-font-size);
|
||||
font-weight: 600;
|
||||
background: transparent;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.rdp-range_start::before {
|
||||
left: 50%;
|
||||
}
|
||||
.rdp-dropdown:not([data-disabled="true"]) {
|
||||
&:focus-visible + .rdp-caption_label {
|
||||
border: var(--rdp-outline);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.rdp-range_middle::before {
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
&:hover {
|
||||
& + .rdp-caption_label {
|
||||
background-color: rgba(var(--color-background-80)) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rdp-range_end::before {
|
||||
right: 50%;
|
||||
}
|
||||
.rdp-dropdown_icon {
|
||||
margin: 0 0 0 5px;
|
||||
}
|
||||
|
||||
.rdp-range_start.rdp-range_end::before {
|
||||
display: none;
|
||||
}
|
||||
/* --------------- */
|
||||
/* Range selection */
|
||||
/* --------------- */
|
||||
|
||||
.rdp-range_middle .rdp-day_button {
|
||||
background-color: transparent;
|
||||
color: inherit;
|
||||
}
|
||||
.rdp-range_start,
|
||||
.rdp-range_middle,
|
||||
.rdp-range_end {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.rdp-day.rdp-range_middle .rdp-day_button:hover,
|
||||
.rdp-day.rdp-range_middle .rdp-day_button:focus-visible {
|
||||
background-color: var(--rdp-background-color);
|
||||
color: inherit;
|
||||
.rdp-range_start::before,
|
||||
.rdp-range_middle::before,
|
||||
.rdp-range_end::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
background-color: var(--rdp-background-color);
|
||||
top: 50%;
|
||||
height: 100%;
|
||||
width: 50%;
|
||||
transform: translate(0, -50%);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.rdp-range_start::before {
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.rdp-range_middle::before {
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.rdp-range_end::before {
|
||||
right: 50%;
|
||||
}
|
||||
|
||||
.rdp-range_start.rdp-range_end::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.rdp-range_middle .rdp-day_button {
|
||||
background-color: transparent;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.rdp-day.rdp-range_middle .rdp-day_button:hover,
|
||||
.rdp-day.rdp-range_middle .rdp-day_button:focus-visible {
|
||||
background-color: var(--rdp-background-color);
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
@theme {
|
||||
/* slide up */
|
||||
--animate-slide-up: slide-up 0.3s ease-out forwards;
|
||||
|
||||
@keyframes slide-up {
|
||||
from {
|
||||
transform: translateY(10px);
|
||||
@@ -11,4 +11,67 @@
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* slide in from bottom */
|
||||
--animate-slide-in-from-bottom: slideInFromBottom 0.25s ease-out forwards;
|
||||
@keyframes slideInFromBottom {
|
||||
0% {
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* slide in from top */
|
||||
--animate-slide-in-from-top: slideInFromTop 0.25s ease-out forwards;
|
||||
@keyframes slideInFromTop {
|
||||
0% {
|
||||
transform: translateY(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* slide out */
|
||||
--animate-slide-out: slideOut 0.25s ease-out forwards;
|
||||
@keyframes slideOut {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* slide out down */
|
||||
--animate-slide-out-down: slideOutDown 0.25s ease-out forwards;
|
||||
@keyframes slideOutDown {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* fade out */
|
||||
--animate-fade-out: fadeOut 0.25s ease-out forwards;
|
||||
@keyframes fadeOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -351,56 +351,3 @@ div.web-view-spinner div.bar12 {
|
||||
.disable-autofill-style:-webkit-autofill:active {
|
||||
-webkit-background-clip: text;
|
||||
}
|
||||
|
||||
@keyframes slideInFromBottom {
|
||||
0% {
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInFromTop {
|
||||
0% {
|
||||
transform: translateY(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideOut {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideOutDown {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -34,26 +34,6 @@
|
||||
--color-alpha-black-1100: oklch(0.1482 0.0034 196.79 / 90%);
|
||||
--color-alpha-black-1200: oklch(0.1482 0.0034 196.79 / 95%);
|
||||
|
||||
--background-color-backdrop: oklch(0 0 0 / 25%);
|
||||
|
||||
/* ---------- Spacing ---------- */
|
||||
--spacing-0: 0;
|
||||
--spacing-25: 0.0625rem;
|
||||
--spacing-50: 0.125rem;
|
||||
--spacing-100: 0.25rem;
|
||||
--spacing-150: 0.375rem;
|
||||
--spacing-200: 0.5rem;
|
||||
--spacing-300: 0.75rem;
|
||||
--spacing-400: 1rem;
|
||||
--spacing-500: 1.25rem;
|
||||
--spacing-600: 1.5rem;
|
||||
--spacing-700: 1.75rem;
|
||||
--spacing-800: 2rem;
|
||||
--spacing-900: 2.25rem;
|
||||
--spacing-1000: 2.5rem;
|
||||
--spacing-1100: 2.75rem;
|
||||
--spacing-1200: 3rem;
|
||||
|
||||
/* ---------- Border radius ---------- */
|
||||
--radius-*: initial;
|
||||
--radius-none: 0;
|
||||
@@ -74,6 +54,15 @@
|
||||
--border-width-xl: 2.5px;
|
||||
--default-border-width: 1px;
|
||||
|
||||
/* ---------- Shadow ---------- */
|
||||
--shadow-raised-0: 0px 1px 6px -1px #292f3d08, 0px 1px 4px 0px #292f3d0a;
|
||||
--shadow-raised-1: 0px 1px 2px -1px #292f3d0f, 0px 1px 3px 0px #292f3d0d;
|
||||
--shadow-raised-2: 0px 2px 4px -1px #292f3d0a, 0px 4px 6px -1px #292f3d0d;
|
||||
--shadow-overlay-1: 0px 10px 10px -5px #292f3d0a, 0px 10px 40px -5px #292f3d0a;
|
||||
--shadow-overlay-2: 0px 10px 10px -10px #292f3d0a, 0px 30px 60px -12px #292f3d1a;
|
||||
--shadow-direction-left: -10px 0px 30px -5px #292f3d05, -5px 0px 80px -5px #292f3d0a;
|
||||
--shadow-direction-right: 10px 0px 30px -5px #0000000a, 5px 0px 80px -5px #0000000a;
|
||||
|
||||
/* Neutral colors */
|
||||
--color-neutral-white: oklch(1 0 0);
|
||||
--color-neutral-100: oklch(0.9851 0 129.63);
|
||||
@@ -301,6 +290,7 @@
|
||||
--background-color-danger-transparent-hover: var(--color-red-100);
|
||||
--background-color-danger-transparent-active: var(--color-red-100);
|
||||
--background-color-danger-transparent-selected: var(--color-red-100);
|
||||
--background-color-backdrop: var(--color-alpha-black-400);
|
||||
|
||||
/* Border colors */
|
||||
--border-color-subtle: var(--color-neutral-400);
|
||||
@@ -325,9 +315,9 @@
|
||||
--text-color-placeholder: var(--color-neutral-900);
|
||||
--text-color-disabled: var(--color-neutral-800);
|
||||
--text-color-accent-primary: var(--color-brand-default);
|
||||
--text-color-on-color: var(--color-neutral-100);
|
||||
--text-color-accent-secondary: var(--color-brand-700);
|
||||
--text-color-on-color-disabled: hsla(201, 7%, 18%, 0.25);
|
||||
--text-color-on-color: var(--color-neutral-100);
|
||||
--text-color-on-color-disabled: var(--color-alpha-black-400);
|
||||
--text-color-inverse: var(--color-neutral-white);
|
||||
--text-color-success: var(--color-green-700);
|
||||
--text-color-success-primary: var(--color-green-900);
|
||||
@@ -357,7 +347,7 @@
|
||||
--text-color-icon-disabled: var(--color-neutral-700);
|
||||
--text-color-icon-danger: var(--color-red-700);
|
||||
--text-color-icon-on-color: var(--color-neutral-white);
|
||||
--text-color-icon-on-color-disabled: hsla(201, 7%, 18%, 0.25);
|
||||
--text-color-icon-on-color-disabled: var(--color-alpha-black-400);
|
||||
--text-color-icon-inverse: var(--color-neutral-white);
|
||||
|
||||
/* Link colors */
|
||||
@@ -371,38 +361,38 @@
|
||||
--label-indigo-hover: var(--extended-color-indigo-300);
|
||||
--label-indigo-icon: var(--extended-color-indigo-700);
|
||||
--label-indigo-text: var(--extended-color-indigo-700);
|
||||
--label-indigo-border: hsla(0, 0%, 100%, 0);
|
||||
--label-indigo-border: var(--extended-color-indigo-700);
|
||||
--label-indigo-focus: var(--extended-color-indigo-500);
|
||||
--label-emerald-bg: var(--extended-color-emerald-50);
|
||||
--label-emerald-bg-strong: var(--extended-color-emerald-600);
|
||||
--label-emerald-hover: var(--extended-color-emerald-200);
|
||||
--label-emerald-icon: var(--extended-color-emerald-600);
|
||||
--label-emerald-text: var(--extended-color-emerald-800);
|
||||
--label-emerald-border: hsla(0, 0%, 100%, 0);
|
||||
--label-emerald-border: var(--extended-color-emerald-800);
|
||||
--label-emerald-focus: var(--extended-color-emerald-700);
|
||||
--label-grey-bg: var(--extended-color-grey-50);
|
||||
--label-grey-bg-strong: var(--extended-color-grey-700);
|
||||
--label-grey-hover: var(--extended-color-grey-100);
|
||||
--label-grey-icon: var(--extended-color-grey-700);
|
||||
--label-grey-text: var(--extended-color-grey-700);
|
||||
--label-grey-border: hsla(0, 0%, 100%, 0);
|
||||
--label-grey-border: var(--extended-color-grey-700);
|
||||
--label-grey-focus: var(--extended-color-grey-500);
|
||||
--label-crimson-bg: var(--extended-color-crimson-50);
|
||||
--label-crimson-bg-strong: var(--extended-color-crimson-700);
|
||||
--label-crimson-hover: var(--extended-color-crimson-100);
|
||||
--label-crimson-icon: var(--extended-color-crimson-700);
|
||||
--label-crimson-text: var(--extended-color-crimson-700);
|
||||
--label-crimson-border: hsla(0, 0%, 100%, 0);
|
||||
--label-crimson-border: var(--extended-color-crimson-700);
|
||||
--label-crimson-focus: var(--extended-color-crimson-500);
|
||||
|
||||
/* Illustration colors */
|
||||
--illustration-fill-white: var(--color-neutral-white);
|
||||
--illustration-fill-1: var(--color-neutral-200);
|
||||
--illustration-fill-2: var(--color-neutral-400);
|
||||
--illustration-fill-3: var(--color-neutral-700);
|
||||
--illustration-stroke-1: var(--color-neutral-700);
|
||||
--illustration-stroke-2: var(--color-neutral-800);
|
||||
--illustration-stroke-3: var(--color-neutral-1200);
|
||||
--illustration-fill-primary: var(--color-neutral-white);
|
||||
--illustration-fill-secondary: var(--color-neutral-200);
|
||||
--illustration-fill-tertiary: var(--color-neutral-400);
|
||||
--illustration-fill-quaternary: var(--color-neutral-700);
|
||||
--illustration-stroke-primary: var(--color-neutral-700);
|
||||
--illustration-stroke-secondary: var(--color-neutral-800);
|
||||
--illustration-stroke-tertiary: var(--color-neutral-1200);
|
||||
}
|
||||
|
||||
@layer theme {
|
||||
@@ -524,6 +514,7 @@
|
||||
--background-color-danger-transparent-hover: var(--color-red-100);
|
||||
--background-color-danger-transparent-active: var(--color-red-100);
|
||||
--background-color-danger-transparent-selected: var(--color-red-100);
|
||||
--background-color-backdrop: var(--color-alpha-white-400);
|
||||
|
||||
/* Border colors */
|
||||
--border-color-subtle: var(--color-neutral-400);
|
||||
@@ -548,9 +539,9 @@
|
||||
--text-color-placeholder: var(--color-neutral-900);
|
||||
--text-color-disabled: var(--color-neutral-800);
|
||||
--text-color-accent-primary: var(--color-brand-default);
|
||||
--text-color-on-color: var(--color-neutral-1200);
|
||||
--text-color-accent-secondary: var(--color-brand-700);
|
||||
--text-color-on-color-disabled: hsla(201, 7%, 92%, 0.25);
|
||||
--text-color-on-color: var(--color-neutral-1200);
|
||||
--text-color-on-color-disabled: var(--color-alpha-white-400);
|
||||
--text-color-inverse: var(--color-neutral-black);
|
||||
--text-color-success: var(--color-green-700);
|
||||
--text-color-success-primary: var(--color-green-900);
|
||||
@@ -566,21 +557,21 @@
|
||||
--text-color-icon-primary: var(--color-neutral-1200);
|
||||
--text-color-icon-accent-subtle: var(--color-brand-700);
|
||||
--text-color-icon-accent-primary: var(--color-brand-default);
|
||||
--text-color-icon-accent-primary-inverse: var(--color-brand-900);
|
||||
--text-color-icon-accent-secondary: var(--color-brand-1200);
|
||||
--text-color-icon-danger-primary: var(--color-red-900);
|
||||
--text-color-icon-danger-secondary: var(--color-red-700);
|
||||
--text-color-icon-success-primary: var(--color-green-900);
|
||||
--text-color-icon-success-secondary: var(--color-green-700);
|
||||
--text-color-icon-warning-primary: var(--color-amber-900);
|
||||
--text-color-icon-warning-secondary: var(--color-amber-700);
|
||||
--text-color-icon-accent-primary-inverse: var(--color-brand-900);
|
||||
--text-color-icon-accent-secondary: var(--color-brand-1200);
|
||||
--text-color-icon-secondary: var(--color-neutral-1100);
|
||||
--text-color-icon-tertiary: var(--color-neutral-1000);
|
||||
--text-color-icon-placeholder: var(--color-neutral-800);
|
||||
--text-color-icon-disabled: var(--color-neutral-700);
|
||||
--text-color-icon-danger: var(--color-red-700);
|
||||
--text-color-icon-on-color: var(--color-neutral-white);
|
||||
--text-color-icon-on-color-disabled: hsla(201, 7%, 92%, 0.25);
|
||||
--text-color-icon-on-color-disabled: var(--color-alpha-white-400);
|
||||
--text-color-icon-inverse: var(--color-neutral-black);
|
||||
|
||||
/* Link colors */
|
||||
@@ -594,38 +585,38 @@
|
||||
--label-indigo-hover: var(--extended-color-indigo-700);
|
||||
--label-indigo-icon: var(--extended-color-indigo-500);
|
||||
--label-indigo-text: var(--extended-color-indigo-500);
|
||||
--label-indigo-border: hsla(0, 0%, 100%, 0);
|
||||
--label-indigo-border: var(--extended-color-indigo-500);
|
||||
--label-indigo-focus: var(--extended-color-indigo-400);
|
||||
--label-emerald-bg: var(--extended-color-emerald-700);
|
||||
--label-emerald-bg-strong: var(--extended-color-emerald-600);
|
||||
--label-emerald-hover: var(--extended-color-emerald-800);
|
||||
--label-emerald-icon: var(--extended-color-emerald-600);
|
||||
--label-emerald-text: var(--extended-color-emerald-400);
|
||||
--label-emerald-border: hsla(0, 0%, 100%, 0);
|
||||
--label-emerald-border: var(--extended-color-emerald-400);
|
||||
--label-emerald-focus: var(--extended-color-emerald-700);
|
||||
--label-grey-bg: var(--extended-color-grey-800);
|
||||
--label-grey-bg-strong: var(--extended-color-grey-500);
|
||||
--label-grey-hover: var(--extended-color-grey-700);
|
||||
--label-grey-icon: var(--extended-color-grey-500);
|
||||
--label-grey-text: var(--extended-color-grey-500);
|
||||
--label-grey-border: hsla(0, 0%, 100%, 0);
|
||||
--label-grey-border: var(--extended-color-grey-500);
|
||||
--label-grey-focus: var(--extended-color-grey-400);
|
||||
--label-crimson-bg: var(--extended-color-crimson-800);
|
||||
--label-crimson-bg-strong: var(--extended-color-crimson-500);
|
||||
--label-crimson-hover: var(--extended-color-crimson-700);
|
||||
--label-crimson-icon: var(--extended-color-crimson-500);
|
||||
--label-crimson-text: var(--extended-color-crimson-500);
|
||||
--label-crimson-border: hsla(0, 0%, 100%, 0);
|
||||
--label-crimson-border: var(--extended-color-crimson-500);
|
||||
--label-crimson-focus: var(--extended-color-crimson-400);
|
||||
|
||||
/* Illustration colors */
|
||||
--illustration-fill-white: var(--color-neutral-400);
|
||||
--illustration-fill-1: var(--color-neutral-500);
|
||||
--illustration-fill-2: var(--color-neutral-700);
|
||||
--illustration-fill-3: var(--color-neutral-700);
|
||||
--illustration-stroke-1: var(--color-neutral-700);
|
||||
--illustration-stroke-2: var(--color-neutral-800);
|
||||
--illustration-stroke-3: var(--color-neutral-1000);
|
||||
--illustration-fill-primary: var(--color-neutral-400);
|
||||
--illustration-fill-secondary: var(--color-neutral-500);
|
||||
--illustration-fill-tertiary: var(--color-neutral-700);
|
||||
--illustration-fill-quaternary: var(--color-neutral-700);
|
||||
--illustration-stroke-primary: var(--color-neutral-700);
|
||||
--illustration-stroke-secondary: var(--color-neutral-800);
|
||||
--illustration-stroke-tertiary: var(--color-neutral-1000);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user