mirror of
https://github.com/IRBorisov/ConceptPortal.git
synced 2025-06-25 20:40:36 +03:00
F: Introduce shadcn, implement okclh colors
This commit is contained in:
Ivan
parent
f8f297c984
commit
f329496679
1
.vscode/settings.json
vendored
1
.vscode/settings.json
vendored
|
|
@ -161,6 +161,7 @@
|
|||
"rstabs",
|
||||
"rstemplates",
|
||||
"setexpr",
|
||||
"shadcn",
|
||||
"SIDELIST",
|
||||
"signup",
|
||||
"simplebezier",
|
||||
|
|
|
|||
|
|
@ -70,6 +70,7 @@ This readme file is used mostly to document project dependencies and conventions
|
|||
- babel-plugin-react-compiler
|
||||
- vite
|
||||
- jest
|
||||
- shadcn
|
||||
- ts-jest
|
||||
- stylelint
|
||||
- stylelint-config-recommended
|
||||
|
|
|
|||
21
rsconcept/frontend/components.json
Normal file
21
rsconcept/frontend/components.json
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema.json",
|
||||
"style": "new-york",
|
||||
"rsc": false,
|
||||
"tsx": true,
|
||||
"tailwind": {
|
||||
"config": "",
|
||||
"css": "src/index.css",
|
||||
"baseColor": "neutral",
|
||||
"cssVariables": true,
|
||||
"prefix": ""
|
||||
},
|
||||
"aliases": {
|
||||
"components": "@/components",
|
||||
"utils": "@/lib/utils",
|
||||
"ui": "@/components/ui",
|
||||
"lib": "@/lib",
|
||||
"hooks": "@/hooks"
|
||||
},
|
||||
"iconLibrary": "lucide"
|
||||
}
|
||||
44
rsconcept/frontend/package-lock.json
generated
44
rsconcept/frontend/package-lock.json
generated
|
|
@ -17,9 +17,11 @@
|
|||
"@uiw/codemirror-themes": "^4.23.10",
|
||||
"@uiw/react-codemirror": "^4.23.10",
|
||||
"axios": "^1.8.4",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"global": "^4.4.0",
|
||||
"js-file-download": "^0.4.12",
|
||||
"lucide-react": "^0.487.0",
|
||||
"qrcode.react": "^4.2.0",
|
||||
"react": "^19.1.0",
|
||||
"react-dom": "^19.1.0",
|
||||
|
|
@ -35,6 +37,8 @@
|
|||
"react-tooltip": "^5.28.0",
|
||||
"react-zoom-pan-pinch": "^3.7.0",
|
||||
"reactflow": "^11.11.4",
|
||||
"tailwind-merge": "^3.1.0",
|
||||
"tw-animate-css": "^1.2.5",
|
||||
"use-debounce": "^10.0.4",
|
||||
"zod": "^3.24.2",
|
||||
"zustand": "^5.0.3"
|
||||
|
|
@ -4979,6 +4983,18 @@
|
|||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/class-variance-authority": {
|
||||
"version": "0.7.1",
|
||||
"resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
|
||||
"integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"clsx": "^2.1.1"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://polar.sh/cva"
|
||||
}
|
||||
},
|
||||
"node_modules/classcat": {
|
||||
"version": "5.0.5",
|
||||
"resolved": "https://registry.npmjs.org/classcat/-/classcat-5.0.5.tgz",
|
||||
|
|
@ -8970,6 +8986,15 @@
|
|||
"yallist": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/lucide-react": {
|
||||
"version": "0.487.0",
|
||||
"resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.487.0.tgz",
|
||||
"integrity": "sha512-aKqhOQ+YmFnwq8dWgGjOuLc8V1R9/c/yOd+zDY4+ohsR2Jo05lSGc3WsstYPIzcTpeosN7LoCkLReUUITvaIvw==",
|
||||
"license": "ISC",
|
||||
"peerDependencies": {
|
||||
"react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/make-dir": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-4.0.0.tgz",
|
||||
|
|
@ -11266,6 +11291,16 @@
|
|||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/tailwind-merge": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.1.0.tgz",
|
||||
"integrity": "sha512-aV27Oj8B7U/tAOMhJsSGdWqelfmudnGMdXIlMnk1JfsjwSjts6o8HyfN7SFH3EztzH4YH8kk6GbLTHzITJO39Q==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/dcastil"
|
||||
}
|
||||
},
|
||||
"node_modules/tailwindcss": {
|
||||
"version": "4.1.3",
|
||||
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.3.tgz",
|
||||
|
|
@ -11925,6 +11960,15 @@
|
|||
"integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==",
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/tw-animate-css": {
|
||||
"version": "1.2.5",
|
||||
"resolved": "https://registry.npmjs.org/tw-animate-css/-/tw-animate-css-1.2.5.tgz",
|
||||
"integrity": "sha512-ABzjfgVo+fDbhRREGL4KQZUqqdPgvc5zVrLyeW9/6mVqvaDepXc7EvedA+pYmMnIOsUAQMwcWzNvom26J2qYvQ==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/Wombosvideo"
|
||||
}
|
||||
},
|
||||
"node_modules/type-check": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
|
||||
|
|
|
|||
|
|
@ -23,9 +23,11 @@
|
|||
"@uiw/codemirror-themes": "^4.23.10",
|
||||
"@uiw/react-codemirror": "^4.23.10",
|
||||
"axios": "^1.8.4",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"global": "^4.4.0",
|
||||
"js-file-download": "^0.4.12",
|
||||
"lucide-react": "^0.487.0",
|
||||
"qrcode.react": "^4.2.0",
|
||||
"react": "^19.1.0",
|
||||
"react-dom": "^19.1.0",
|
||||
|
|
@ -41,6 +43,8 @@
|
|||
"react-tooltip": "^5.28.0",
|
||||
"react-zoom-pan-pinch": "^3.7.0",
|
||||
"reactflow": "^11.11.4",
|
||||
"tailwind-merge": "^3.1.0",
|
||||
"tw-animate-css": "^1.2.5",
|
||||
"use-debounce": "^10.0.4",
|
||||
"zod": "^3.24.2",
|
||||
"zustand": "^5.0.3"
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ export function GraphSelectors() {
|
|||
<div className='relative border rounded-b-none select-none clr-input rounded-t-md pointer-events-auto'>
|
||||
<div className='absolute z-pop right-10 h-10 flex items-center'>
|
||||
{coloring === 'status' ? <BadgeHelp topic={HelpTopic.UI_CST_STATUS} contentClass='min-w-100' /> : null}
|
||||
{coloring === 'type' ? <BadgeHelp topic={HelpTopic.UI_CST_CLASS} contentClass='min-w-100]' /> : null}
|
||||
{coloring === 'type' ? <BadgeHelp topic={HelpTopic.UI_CST_CLASS} contentClass='min-w-100' /> : null}
|
||||
{coloring === 'schemas' ? <SchemasGuide /> : null}
|
||||
</div>
|
||||
<SelectSingle
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
@import 'tailwindcss';
|
||||
@import 'tw-animate-css';
|
||||
|
||||
@import './styling/setup.css';
|
||||
@import './styling/overrides.css';
|
||||
|
|
@ -25,7 +26,7 @@
|
|||
outline: 2px solid hotpink !important;
|
||||
} */
|
||||
|
||||
@theme {
|
||||
@theme inline {
|
||||
/* stylelint-disable-next-line custom-property-pattern */
|
||||
--color-*: initial;
|
||||
--color-transparent: transparent;
|
||||
|
|
@ -80,3 +81,114 @@
|
|||
--duration-dropdown: 200ms;
|
||||
--duration-select: 100ms;
|
||||
}
|
||||
|
||||
/* ========= shadcn theme ============ */
|
||||
|
||||
:root {
|
||||
--radius: 0.625rem;
|
||||
|
||||
--background: oklch(100% 0 0deg);
|
||||
--foreground: oklch(14.5% 0 0deg);
|
||||
--card: oklch(100% 0 0deg);
|
||||
--card-foreground: oklch(14.5% 0 0deg);
|
||||
--popover: oklch(100% 0 0deg);
|
||||
--popover-foreground: oklch(14.5% 0 0deg);
|
||||
--primary: oklch(20.5% 0 0deg);
|
||||
--primary-foreground: oklch(98.5% 0 0deg);
|
||||
--secondary: oklch(97% 0 0deg);
|
||||
--secondary-foreground: oklch(20.5% 0 0deg);
|
||||
--muted: oklch(97% 0 0deg);
|
||||
--muted-foreground: oklch(55.6% 0 0deg);
|
||||
--accent: oklch(97% 0 0deg);
|
||||
--accent-foreground: oklch(20.5% 0 0deg);
|
||||
--destructive: oklch(57.7% 0.245 27.325deg);
|
||||
--border: oklch(92.2% 0 0deg);
|
||||
--input: oklch(92.2% 0 0deg);
|
||||
--ring: oklch(70.8% 0 0deg);
|
||||
--chart-1: oklch(64.6% 0.222 41.116deg);
|
||||
--chart-2: oklch(60% 0.118 184.704deg);
|
||||
--chart-3: oklch(39.8% 0.07 227.392deg);
|
||||
--chart-4: oklch(82.8% 0.189 84.429deg);
|
||||
--chart-5: oklch(76.9% 0.188 70.08deg);
|
||||
--sidebar: oklch(98.5% 0 0deg);
|
||||
--sidebar-foreground: oklch(14.5% 0 0deg);
|
||||
--sidebar-primary: oklch(20.5% 0 0deg);
|
||||
--sidebar-primary-foreground: oklch(98.5% 0 0deg);
|
||||
--sidebar-accent: oklch(97% 0 0deg);
|
||||
--sidebar-accent-foreground: oklch(20.5% 0 0deg);
|
||||
--sidebar-border: oklch(92.2% 0 0deg);
|
||||
--sidebar-ring: oklch(70.8% 0 0deg);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: oklch(14.5% 0 0deg);
|
||||
--foreground: oklch(98.5% 0 0deg);
|
||||
--card: oklch(20.5% 0 0deg);
|
||||
--card-foreground: oklch(98.5% 0 0deg);
|
||||
--popover: oklch(20.5% 0 0deg);
|
||||
--popover-foreground: oklch(98.5% 0 0deg);
|
||||
--primary: oklch(92.2% 0 0deg);
|
||||
--primary-foreground: oklch(20.5% 0 0deg);
|
||||
--secondary: oklch(26.9% 0 0deg);
|
||||
--secondary-foreground: oklch(98.5% 0 0deg);
|
||||
--muted: oklch(26.9% 0 0deg);
|
||||
--muted-foreground: oklch(70.8% 0 0deg);
|
||||
--accent: oklch(26.9% 0 0deg);
|
||||
--accent-foreground: oklch(98.5% 0 0deg);
|
||||
--destructive: oklch(70.4% 0.191 22.216deg);
|
||||
--border: oklch(100% 0 0deg / 10%);
|
||||
--input: oklch(100% 0 0deg / 15%);
|
||||
--ring: oklch(55.6% 0 0deg);
|
||||
--chart-1: oklch(48.8% 0.243 264.376deg);
|
||||
--chart-2: oklch(69.6% 0.17 162.48deg);
|
||||
--chart-3: oklch(76.9% 0.188 70.08deg);
|
||||
--chart-4: oklch(62.7% 0.265 303.9deg);
|
||||
--chart-5: oklch(64.5% 0.246 16.439deg);
|
||||
--sidebar: oklch(20.5% 0 0deg);
|
||||
--sidebar-foreground: oklch(98.5% 0 0deg);
|
||||
--sidebar-primary: oklch(48.8% 0.243 264.376deg);
|
||||
--sidebar-primary-foreground: oklch(98.5% 0 0deg);
|
||||
--sidebar-accent: oklch(26.9% 0 0deg);
|
||||
--sidebar-accent-foreground: oklch(98.5% 0 0deg);
|
||||
--sidebar-border: oklch(100% 0 0deg / 10%);
|
||||
--sidebar-ring: oklch(55.6% 0 0deg);
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-card: var(--card);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-border: var(--border);
|
||||
--color-input: var(--input);
|
||||
--color-ring: var(--ring);
|
||||
--color-chart-1: var(--chart-1);
|
||||
--color-chart-2: var(--chart-2);
|
||||
--color-chart-3: var(--chart-3);
|
||||
--color-chart-4: var(--chart-4);
|
||||
--color-chart-5: var(--chart-5);
|
||||
--color-sidebar: var(--sidebar);
|
||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||
--color-sidebar-primary: var(--sidebar-primary);
|
||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||
--color-sidebar-accent: var(--sidebar-accent);
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
}
|
||||
|
|
|
|||
6
rsconcept/frontend/src/lib/utils.ts
Normal file
6
rsconcept/frontend/src/lib/utils.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
import { type ClassValue, clsx } from 'clsx';
|
||||
import { twMerge } from 'tailwind-merge';
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs));
|
||||
}
|
||||
|
|
@ -20,93 +20,91 @@
|
|||
/* Light Theme */
|
||||
/* prettier-ignore */
|
||||
:not(.dark):root {
|
||||
--clr-prim-0: hsl(000deg 000% 100%);
|
||||
--clr-prim-100: hsl(000deg 000% 098%);
|
||||
--clr-prim-200: hsl(000deg 000% 094%);
|
||||
--clr-prim-300: hsl(000deg 000% 091%);
|
||||
--clr-prim-400: hsl(000deg 000% 080%);
|
||||
--clr-prim-600: hsl(000deg 000% 065%);
|
||||
--clr-prim-800: hsl(000deg 000% 047%);
|
||||
--clr-prim-999: hsl(000deg 000% 000%);
|
||||
--clr-prim-0: oklch(100% 0 0deg);
|
||||
--clr-prim-100: oklch(098% 0 0deg);
|
||||
--clr-prim-200: oklch(095% 0 0deg);
|
||||
--clr-prim-300: oklch(092% 0 0deg);
|
||||
--clr-prim-400: oklch(085% 0 0deg);
|
||||
--clr-prim-600: oklch(070% 0 0deg);
|
||||
--clr-prim-800: oklch(055% 0 0deg);
|
||||
--clr-prim-999: oklch(000% 0 0deg);
|
||||
|
||||
--clr-sec-0: hsl(000deg 000% 100%);
|
||||
--clr-sec-100: hsl(190deg 080% 094%);
|
||||
--clr-sec-200: hsl(220deg 080% 092%);
|
||||
--clr-sec-300: hsl(220deg 100%080%);
|
||||
--clr-sec-400: hsl(220deg 100% 070%);
|
||||
--clr-sec-600: hsl(220deg 100% 060%);
|
||||
--clr-sec-800: hsl(220deg 100% 050%);
|
||||
--clr-sec-0: oklch(100% 0 0deg);
|
||||
--clr-sec-100: oklch(095% 0.050 262deg);
|
||||
--clr-sec-200: oklch(088% 0.050 262deg);
|
||||
--clr-sec-300: oklch(080% 0.100 262deg);
|
||||
--clr-sec-400: oklch(075% 0.150 262deg);
|
||||
--clr-sec-600: oklch(065% 0.250 262deg);
|
||||
--clr-sec-800: oklch(055% 0.250 262deg);
|
||||
|
||||
--clr-warn-100: hsl(000deg 100% 095%);
|
||||
--clr-warn-600: hsl(000deg 072% 051%);
|
||||
--clr-warn-100: oklch(094% 0.050 27deg);
|
||||
--clr-warn-600: oklch(060% 0.250 27deg);
|
||||
--clr-ok-600: oklch(060% 0.250 143deg);
|
||||
|
||||
--clr-ok-600: hsl(120deg 080% 37%);
|
||||
|
||||
--clr-select-node: hsl(162deg 082% 051%);
|
||||
--clr-select-node: oklch(080% 0.150 165deg);
|
||||
|
||||
/* Highlight accents */
|
||||
--acc-bg-red: hsl(000deg 100% 089%);
|
||||
--acc-bg-green: hsl(100deg 100% 075%);
|
||||
--acc-bg-blue: hsl(235deg 080% 087%);
|
||||
--acc-bg-purple: hsl(274deg 089% 081%);
|
||||
--acc-bg-teal: hsl(192deg 089% 081%);
|
||||
--acc-bg-orange: hsl(028deg 100% 075%);
|
||||
--acc-bg-red: oklch(085% 0.150 27deg);
|
||||
--acc-bg-green: oklch(085% 0.150 138deg);
|
||||
--acc-bg-blue: oklch(085% 0.150 262deg);
|
||||
--acc-bg-purple: oklch(085% 0.200 295deg);
|
||||
--acc-bg-teal: oklch(085% 0.200 210deg);
|
||||
--acc-bg-orange: oklch(085% 0.150 62deg);
|
||||
|
||||
--acc-bg-green25: hsl(100deg 100% 096%);
|
||||
--acc-bg-green50: hsl(100deg 100% 090%);
|
||||
--acc-bg-orange50: hsl(028deg 100% 090%);
|
||||
--acc-bg-green25: oklch(097% 0.131 138deg);
|
||||
--acc-bg-green50: oklch(090% 0.175 138deg);
|
||||
--acc-bg-orange50: oklch(090% 0.044 62deg);
|
||||
|
||||
--acc-fg-red: hsl(000deg 090% 045%);
|
||||
--acc-fg-green: hsl(100deg 090% 035%);
|
||||
--acc-fg-blue: hsl(235deg 100% 050%);
|
||||
--acc-fg-purple: hsl(270deg 100% 055%);
|
||||
--acc-fg-teal: hsl(200deg 080% 050%);
|
||||
--acc-fg-orange: hsl(028deg 100% 050%);
|
||||
--acc-fg-red: oklch(060% 0.220 27deg);
|
||||
--acc-fg-green: oklch(060% 0.250 138deg);
|
||||
--acc-fg-blue: oklch(060% 0.300 262deg);
|
||||
--acc-fg-purple: oklch(060% 0.250 295deg);
|
||||
--acc-fg-teal: oklch(060% 0.150 210deg);
|
||||
--acc-fg-orange: oklch(060% 0.150 62deg);
|
||||
}
|
||||
|
||||
/* Dark Theme */
|
||||
/* prettier-ignore */
|
||||
.dark:root {
|
||||
--clr-prim-0: hsl(000deg 000% 005%);
|
||||
--clr-prim-100: hsl(000deg 000% 009%);
|
||||
--clr-prim-200: hsl(000deg 000% 015%);
|
||||
--clr-prim-300: hsl(000deg 000% 022%);
|
||||
--clr-prim-400: hsl(000deg 000% 035%);
|
||||
--clr-prim-600: hsl(000deg 000% 055%);
|
||||
--clr-prim-800: hsl(000deg 000% 080%);
|
||||
--clr-prim-999: hsl(000deg 000% 093%);
|
||||
--clr-prim-0: oklch(015% 0 0deg);
|
||||
--clr-prim-100: oklch(022% 0 0deg);
|
||||
--clr-prim-200: oklch(030% 0 0deg);
|
||||
--clr-prim-300: oklch(036% 0 0deg);
|
||||
--clr-prim-400: oklch(050% 0 0deg);
|
||||
--clr-prim-600: oklch(065% 0 0deg);
|
||||
--clr-prim-800: oklch(085% 0 0deg);
|
||||
--clr-prim-999: oklch(095% 0 0deg);
|
||||
|
||||
--clr-sec-800: hsl(267deg 070% 070%);
|
||||
--clr-sec-600: hsl(267deg 050% 060%);
|
||||
--clr-sec-400: hsl(267deg 050% 050%);
|
||||
--clr-sec-300: hsl(267deg 050% 040%);
|
||||
--clr-sec-200: hsl(267deg 050% 032%);
|
||||
--clr-sec-100: hsl(269deg 030% 028%);
|
||||
--clr-sec-0: hsl(000deg 000% 100%);
|
||||
--clr-sec-0: oklch(100% 0 0deg);
|
||||
--clr-sec-100: oklch(025% 0.100 295deg);
|
||||
--clr-sec-200: oklch(035% 0.100 295deg);
|
||||
--clr-sec-300: oklch(045% 0.150 295deg);
|
||||
--clr-sec-400: oklch(055% 0.200 295deg);
|
||||
--clr-sec-600: oklch(065% 0.250 295deg);
|
||||
--clr-sec-800: oklch(075% 0.250 295deg);
|
||||
|
||||
--clr-warn-100: hsl(000deg 100% 015%);
|
||||
--clr-warn-600: hsl(000deg 080% 055%);
|
||||
--clr-warn-100: oklch(025% 0.108 27deg);
|
||||
--clr-warn-600: oklch(070% 0.200 27deg);
|
||||
--clr-ok-600: oklch(070% 0.200 143deg);
|
||||
|
||||
--clr-ok-600: hsl(120deg 080% 042%);
|
||||
|
||||
--clr-select-node: hsl(162deg 082% 041%);
|
||||
--clr-select-node: oklch(070% 0.147 165deg);
|
||||
|
||||
/* Highlight accents */
|
||||
--acc-bg-red: hsl(000deg 080% 037%);
|
||||
--acc-bg-green: hsl(100deg 080% 025%);
|
||||
--acc-bg-blue: hsl(235deg 054% 049%);
|
||||
--acc-bg-purple: hsl(270deg 080% 050%);
|
||||
--acc-bg-teal: hsl(192deg 080% 030%);
|
||||
--acc-bg-orange: hsl(035deg 100% 035%);
|
||||
--acc-bg-red: oklch(050% 0.150 27deg);
|
||||
--acc-bg-green: oklch(050% 0.150 138deg);
|
||||
--acc-bg-blue: oklch(050% 0.150 262deg);
|
||||
--acc-bg-purple: oklch(050% 0.200 295deg);
|
||||
--acc-bg-teal: oklch(050% 0.250 210deg);
|
||||
--acc-bg-orange: oklch(050% 0.100 62deg);
|
||||
|
||||
--acc-bg-green25: hsl(100deg 080% 009%);
|
||||
--acc-bg-green50: hsl(100deg 080% 017%);
|
||||
--acc-bg-orange50: hsl(035deg 100% 016%);
|
||||
--acc-bg-green25: oklch(028% 0.100 138deg);
|
||||
--acc-bg-green50: oklch(038% 0.200 138deg);
|
||||
--acc-bg-orange50: oklch(038% 0.075 62deg);
|
||||
|
||||
--acc-fg-red: hsl(000deg 080% 045%);
|
||||
--acc-fg-green: hsl(100deg 080% 035%);
|
||||
--acc-fg-blue: hsl(235deg 100% 080%);
|
||||
--acc-fg-purple: hsl(270deg 100% 080%);
|
||||
--acc-fg-teal: hsl(192deg 100% 045%);
|
||||
--acc-fg-orange: hsl(035deg 100% 050%);
|
||||
--acc-fg-red: oklch(075% 0.200 27deg);
|
||||
--acc-fg-green: oklch(075% 0.150 138deg);
|
||||
--acc-fg-blue: oklch(075% 0.150 262deg);
|
||||
--acc-fg-purple: oklch(075% 0.250 295deg);
|
||||
--acc-fg-teal: oklch(075% 0.150 210deg);
|
||||
--acc-fg-orange: oklch(075% 0.150 62deg);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user