@spear-ai/spectral 1.0.0 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,3 @@
1
+ import { ClassValue } from 'clsx';
2
+ export declare function cn(...inputs: ClassValue[]): string;
3
+ export declare function pxToRem(px: number): string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spear-ai/spectral",
3
- "version": "1.0.0",
3
+ "version": "1.0.1",
4
4
  "type": "module",
5
5
  "private": false,
6
6
  "repository": {
@@ -15,26 +15,7 @@
15
15
  "import": "./dist/index.js",
16
16
  "types": "./dist/index.d.ts"
17
17
  },
18
- "./Button": {
19
- "import": "./dist/Button.js",
20
- "types": "./dist/components/Button/Button.d.ts"
21
- },
22
- "./Card": {
23
- "import": "./dist/Card.js",
24
- "types": "./dist/components/Card/Card.d.ts"
25
- },
26
- "./Drawer": {
27
- "import": "./dist/Drawer.js",
28
- "types": "./dist/components/Drawer/Drawer.d.ts"
29
- },
30
- "./Skeleton": {
31
- "import": "./dist/Skeleton.js",
32
- "types": "./dist/components/Skeleton/Skeleton.d.ts"
33
- },
34
- "./Slider": {
35
- "import": "./dist/Slider.js",
36
- "types": "./dist/components/Slider/Slider.d.ts"
37
- }
18
+ "./styles": "./dist/assets/spectral.css"
38
19
  },
39
20
  "files": [
40
21
  "dist",
@@ -93,6 +74,7 @@
93
74
  "typescript": "^5.9.2",
94
75
  "vite": "^7.1.3",
95
76
  "vite-plugin-dts": "^4.5.4",
77
+ "vite-plugin-lib-inject-css": "^2.2.2",
96
78
  "vitest": "^3.2.4"
97
79
  },
98
80
  "peerDependencies": {
@@ -107,8 +89,8 @@
107
89
  },
108
90
  "scripts": {
109
91
  "dev": "vite --force",
110
- "build": "tsup",
111
- "build:lib": "tsup && pnpm run clean:build-artifacts",
92
+ "build": "vite build",
93
+ "build:lib": "vite build && node scripts/inject-css.js && pnpm run clean:build-artifacts",
112
94
  "preview": "vite preview",
113
95
  "storybook": "storybook dev -p 6006",
114
96
  "storybook:build": "storybook build",
package/dist/Card.css DELETED
@@ -1,4 +0,0 @@
1
- /* src/components/Card/main.css */
2
- .card-loading-overlay {
3
- backdrop-filter: blur(2px);
4
- }
@@ -1,12 +0,0 @@
1
- "use client"
2
-
3
- // src/utils/twUtils.ts
4
- import { clsx } from "clsx";
5
- import { twMerge } from "tailwind-merge";
6
- function cn(...inputs) {
7
- return twMerge(clsx(inputs));
8
- }
9
-
10
- export {
11
- cn
12
- };
package/dist/index.css DELETED
@@ -1,189 +0,0 @@
1
- @import "tailwindcss";
2
-
3
- /* src/components/Card/main.css */
4
- .card-loading-overlay {
5
- backdrop-filter: blur(2px);
6
- }
7
-
8
- /* node_modules/.pnpm/tw-animate-css@1.3.8/node_modules/tw-animate-css/dist/tw-animate.css */
9
- @property --tw-animation-delay { syntax:"*";inherits:false;initial-value:0s }
10
- @property --tw-animation-direction { syntax:"*";inherits:false;initial-value:normal }
11
- @property --tw-animation-duration { syntax:"*";inherits:false }
12
- @property --tw-animation-fill-mode { syntax:"*";inherits:false;initial-value:none }
13
- @property --tw-animation-iteration-count { syntax:"*";inherits:false;initial-value:1 }
14
- @property --tw-enter-blur { syntax:"*";inherits:false;initial-value:0 }
15
- @property --tw-enter-opacity { syntax:"*";inherits:false;initial-value:1 }
16
- @property --tw-enter-rotate { syntax:"*";inherits:false;initial-value:0 }
17
- @property --tw-enter-scale { syntax:"*";inherits:false;initial-value:1 }
18
- @property --tw-enter-translate-x { syntax:"*";inherits:false;initial-value:0 }
19
- @property --tw-enter-translate-y { syntax:"*";inherits:false;initial-value:0 }
20
- @property --tw-exit-blur { syntax:"*";inherits:false;initial-value:0 }
21
- @property --tw-exit-opacity { syntax:"*";inherits:false;initial-value:1 }
22
- @property --tw-exit-rotate { syntax:"*";inherits:false;initial-value:0 }
23
- @property --tw-exit-scale { syntax:"*";inherits:false;initial-value:1 }
24
- @property --tw-exit-translate-x { syntax:"*";inherits:false;initial-value:0 }
25
- @property --tw-exit-translate-y { syntax:"*";inherits:false;initial-value:0 }
26
- @theme inline { --animation-delay-0: 0s; --animation-delay-75: 75ms; --animation-delay-100: .1s; --animation-delay-150: .15s; --animation-delay-200: .2s; --animation-delay-300: .3s; --animation-delay-500: .5s; --animation-delay-700: .7s; --animation-delay-1000: 1s; --animation-repeat-0: 0; --animation-repeat-1: 1; --animation-repeat-infinite: infinite; --animation-direction-normal: normal; --animation-direction-reverse: reverse; --animation-direction-alternate: alternate; --animation-direction-alternate-reverse: alternate-reverse; --animation-fill-mode-none: none; --animation-fill-mode-forwards: forwards; --animation-fill-mode-backwards: backwards; --animation-fill-mode-both: both; --percentage-0: 0; --percentage-5: .05; --percentage-10: .1; --percentage-15: .15; --percentage-20: .2; --percentage-25: .25; --percentage-30: .3; --percentage-35: .35; --percentage-40: .4; --percentage-45: .45; --percentage-50: .5; --percentage-55: .55; --percentage-60: .6; --percentage-65: .65; --percentage-70: .7; --percentage-75: .75; --percentage-80: .8; --percentage-85: .85; --percentage-90: .9; --percentage-95: .95; --percentage-100: 1; --percentage-translate-full: 1; --animate-in: enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); --animate-out: exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); @keyframes enter { from { opacity: var(--tw-enter-opacity,1); transform: translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0)scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0)); filter: blur(var(--tw-enter-blur,0)); }}@keyframes exit { to { opacity: var(--tw-exit-opacity,1); transform: translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0)scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1))rotate(var(--tw-exit-rotate,0)); filter: blur(var(--tw-exit-blur,0)); }}--animate-accordion-down: accordion-down var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); --animate-accordion-up: accordion-up var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); --animate-collapsible-down: collapsible-down var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); --animate-collapsible-up: collapsible-up var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); @keyframes accordion-down { from { height: 0; }to { height: var(--radix-accordion-content-height,var(--bits-accordion-content-height,var(--reka-accordion-content-height,var(--kb-accordion-content-height,var(--ngp-accordion-content-height,auto))))); }}@keyframes accordion-up { from { height: var(--radix-accordion-content-height,var(--bits-accordion-content-height,var(--reka-accordion-content-height,var(--kb-accordion-content-height,var(--ngp-accordion-content-height,auto))))); }to { height: 0; }}@keyframes collapsible-down { from { height: 0; }to { height: var(--radix-collapsible-content-height,var(--bits-collapsible-content-height,var(--reka-collapsible-content-height,var(--kb-collapsible-content-height,auto)))); }}@keyframes collapsible-up { from { height: var(--radix-collapsible-content-height,var(--bits-collapsible-content-height,var(--reka-collapsible-content-height,var(--kb-collapsible-content-height,auto)))); }to { height: 0; }}--animate-caret-blink: caret-blink 1.25s ease-out infinite; @keyframes caret-blink { 0%,70%,100% { opacity: 1; }20%,50% { opacity: 0; }} }
27
- @utility animation-duration-* { --tw-animation-duration: calc(--value(number)*1ms); --tw-animation-duration: --value(--animation-duration-*,[duration],"initial",[*]); animation-duration: calc(--value(number)*1ms); animation-duration: --value(--animation-duration-*,[duration],"initial",[*]); }
28
- @utility delay-* { animation-delay: calc(--value(number)*1ms); animation-delay: --value(--animation-delay-*, [duration], "initial", [*]); --tw-animation-delay: calc(--value(number)*1ms); --tw-animation-delay: --value(--animation-delay-*, [duration], "initial", [*]); }
29
- @utility repeat-* { animation-iteration-count: --value(--animation-repeat-*, number, "initial", [*]); --tw-animation-iteration-count: --value(--animation-repeat-*, number, "initial", [*]); }
30
- @utility direction-* { animation-direction: --value(--animation-direction-*, "initial", [*]); --tw-animation-direction: --value(--animation-direction-*, "initial", [*]); }
31
- @utility fill-mode-* { animation-fill-mode: --value(--animation-fill-mode-*, "initial", [*]); --tw-animation-fill-mode: --value(--animation-fill-mode-*, "initial", [*]); }
32
- @utility running { animation-play-state: running; }
33
- @utility paused { animation-play-state: paused; }
34
- @utility play-state-* { animation-play-state: --value("initial", [*]); }
35
- @utility blur-in { --tw-enter-blur: 20px; }
36
- @utility blur-in-* { --tw-enter-blur: calc(--value(number)*1px); --tw-enter-blur: --value(--blur-*,[*]); }
37
- @utility blur-out { --tw-exit-blur: 20px; }
38
- @utility blur-out-* { --tw-exit-blur: calc(--value(number)*1px); --tw-exit-blur: --value(--blur-*,[*]); }
39
- @utility fade-in { --tw-enter-opacity: 0; }
40
- @utility fade-in-* { --tw-enter-opacity: calc(--value(number)/100); --tw-enter-opacity: --value(--percentage-*,[*]); }
41
- @utility fade-out { --tw-exit-opacity: 0; }
42
- @utility fade-out-* { --tw-exit-opacity: calc(--value(number)/100); --tw-exit-opacity: --value(--percentage-*,[*]); }
43
- @utility zoom-in { --tw-enter-scale: 0; }
44
- @utility zoom-in-* { --tw-enter-scale: calc(--value(number)*1%); --tw-enter-scale: calc(--value(ratio)); --tw-enter-scale: --value(--percentage-*,[*]); }
45
- @utility -zoom-in-* { --tw-enter-scale: calc(--value(number)*-1%); --tw-enter-scale: calc(--value(ratio)*-1); --tw-enter-scale: --value(--percentage-*,[*]); }
46
- @utility zoom-out { --tw-exit-scale: 0; }
47
- @utility zoom-out-* { --tw-exit-scale: calc(--value(number)*1%); --tw-exit-scale: calc(--value(ratio)); --tw-exit-scale: --value(--percentage-*,[*]); }
48
- @utility -zoom-out-* { --tw-exit-scale: calc(--value(number)*-1%); --tw-exit-scale: calc(--value(ratio)*-1); --tw-exit-scale: --value(--percentage-*,[*]); }
49
- @utility spin-in { --tw-enter-rotate: 30deg; }
50
- @utility spin-in-* { --tw-enter-rotate: calc(--value(number)*1deg); --tw-enter-rotate: calc(--value(ratio)*360deg); --tw-enter-rotate: --value(--rotate-*,[*]); }
51
- @utility -spin-in { --tw-enter-rotate: -30deg; }
52
- @utility -spin-in-* { --tw-enter-rotate: calc(--value(number)*-1deg); --tw-enter-rotate: calc(--value(ratio)*-360deg); --tw-enter-rotate: --value(--rotate-*,[*]); }
53
- @utility spin-out { --tw-exit-rotate: 30deg; }
54
- @utility spin-out-* { --tw-exit-rotate: calc(--value(number)*1deg); --tw-exit-rotate: calc(--value(ratio)*360deg); --tw-exit-rotate: --value(--rotate-*,[*]); }
55
- @utility -spin-out { --tw-exit-rotate: -30deg; }
56
- @utility -spin-out-* { --tw-exit-rotate: calc(--value(number)*-1deg); --tw-exit-rotate: calc(--value(ratio)*-360deg); --tw-exit-rotate: --value(--rotate-*,[*]); }
57
- @utility slide-in-from-top { --tw-enter-translate-y: -100%; }
58
- @utility slide-in-from-top-* { --tw-enter-translate-y: --spacing(--value(integer)*-1); --tw-enter-translate-y: calc(--value(--percentage-*,--percentage-translate-*)*-100%); --tw-enter-translate-y: calc(--value(ratio)*-100%); --tw-enter-translate-y: calc(--value(--translate-*,[percentage],[length])*-1); }
59
- @utility slide-in-from-bottom { --tw-enter-translate-y: 100%; }
60
- @utility slide-in-from-bottom-* { --tw-enter-translate-y: --spacing(--value(integer)); --tw-enter-translate-y: calc(--value(--percentage-*,--percentage-translate-*)*100%); --tw-enter-translate-y: calc(--value(ratio)*100%); --tw-enter-translate-y: --value(--translate-*,[percentage],[length]); }
61
- @utility slide-in-from-left { --tw-enter-translate-x: -100%; }
62
- @utility slide-in-from-left-* { --tw-enter-translate-x: --spacing(--value(integer)*-1); --tw-enter-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*-100%); --tw-enter-translate-x: calc(--value(ratio)*-100%); --tw-enter-translate-x: calc(--value(--translate-*,[percentage],[length])*-1); }
63
- @utility slide-in-from-right { --tw-enter-translate-x: 100%; }
64
- @utility slide-in-from-right-* { --tw-enter-translate-x: --spacing(--value(integer)); --tw-enter-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*100%); --tw-enter-translate-x: calc(--value(ratio)*100%); --tw-enter-translate-x: --value(--translate-*,[percentage],[length]); }
65
- @utility slide-in-from-start { &:dir(ltr){ --tw-enter-translate-x: -100%; }&:dir(rtl){ --tw-enter-translate-x: 100%; } }
66
- @utility slide-in-from-start-* { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"]*){ --tw-enter-translate-x: --spacing(--value(integer)*-1); --tw-enter-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*-100%); --tw-enter-translate-x: calc(--value(ratio)*-100%); --tw-enter-translate-x: calc(--value(--translate-*,[percentage],[length])*-1); }&:where(:dir(rtl), [dir="rtl"], [dir="rtl"]*){ --tw-enter-translate-x: --spacing(--value(integer)); --tw-enter-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*100%); --tw-enter-translate-x: calc(--value(ratio)*100%); --tw-enter-translate-x: --value(--translate-*,[percentage],[length]); } }
67
- @utility slide-in-from-end { &:dir(ltr){ --tw-enter-translate-x: 100%; }&:dir(rtl){ --tw-enter-translate-x: -100%; } }
68
- @utility slide-in-from-end-* { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"]*){ --tw-enter-translate-x: --spacing(--value(integer)); --tw-enter-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*100%); --tw-enter-translate-x: calc(--value(ratio)*100%); --tw-enter-translate-x: --value(--translate-*,[percentage],[length]); }&:where(:dir(rtl), [dir="rtl"], [dir="rtl"]*){ --tw-enter-translate-x: --spacing(--value(integer)*-1); --tw-enter-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*-100%); --tw-enter-translate-x: calc(--value(ratio)*-100%); --tw-enter-translate-x: calc(--value(--translate-*,[percentage],[length])*-1); } }
69
- @utility slide-out-to-top { --tw-exit-translate-y: -100%; }
70
- @utility slide-out-to-top-* { --tw-exit-translate-y: --spacing(--value(integer)*-1); --tw-exit-translate-y: calc(--value(--percentage-*,--percentage-translate-*)*-100%); --tw-exit-translate-y: calc(--value(ratio)*-100%); --tw-exit-translate-y: calc(--value(--translate-*,[percentage],[length])*-1); }
71
- @utility slide-out-to-bottom { --tw-exit-translate-y: 100%; }
72
- @utility slide-out-to-bottom-* { --tw-exit-translate-y: --spacing(--value(integer)); --tw-exit-translate-y: calc(--value(--percentage-*,--percentage-translate-*)*100%); --tw-exit-translate-y: calc(--value(ratio)*100%); --tw-exit-translate-y: --value(--translate-*,[percentage],[length]); }
73
- @utility slide-out-to-left { --tw-exit-translate-x: -100%; }
74
- @utility slide-out-to-left-* { --tw-exit-translate-x: --spacing(--value(integer)*-1); --tw-exit-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*-100%); --tw-exit-translate-x: calc(--value(ratio)*-100%); --tw-exit-translate-x: calc(--value(--translate-*,[percentage],[length])*-1); }
75
- @utility slide-out-to-right { --tw-exit-translate-x: 100%; }
76
- @utility slide-out-to-right-* { --tw-exit-translate-x: --spacing(--value(integer)); --tw-exit-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*100%); --tw-exit-translate-x: calc(--value(ratio)*100%); --tw-exit-translate-x: --value(--translate-*,[percentage],[length]); }
77
- @utility slide-out-to-start { &:dir(ltr){ --tw-exit-translate-x: -100%; }&:dir(rtl){ --tw-exit-translate-x: 100%; } }
78
- @utility slide-out-to-start-* { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"]*){ --tw-exit-translate-x: --spacing(--value(integer)*-1); --tw-exit-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*-100%); --tw-exit-translate-x: calc(--value(ratio)*-100%); --tw-exit-translate-x: calc(--value(--translate-*,[percentage],[length])*-1); }&:where(:dir(rtl), [dir="rtl"], [dir="rtl"]*){ --tw-exit-translate-x: --spacing(--value(integer)); --tw-exit-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*100%); --tw-exit-translate-x: calc(--value(ratio)*100%); --tw-exit-translate-x: --value(--translate-*,[percentage],[length]); } }
79
- @utility slide-out-to-end { &:dir(ltr){ --tw-exit-translate-x: 100%; }&:dir(rtl){ --tw-exit-translate-x: -100%; } }
80
- @utility slide-out-to-end-* { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"]*){ --tw-exit-translate-x: --spacing(--value(integer)); --tw-exit-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*100%); --tw-exit-translate-x: calc(--value(ratio)*100%); --tw-exit-translate-x: --value(--translate-*,[percentage],[length]); }&:where(:dir(rtl), [dir="rtl"], [dir="rtl"]*){ --tw-exit-translate-x: --spacing(--value(integer)*-1); --tw-exit-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*-100%); --tw-exit-translate-x: calc(--value(ratio)*-100%); --tw-exit-translate-x: calc(--value(--translate-*,[percentage],[length])*-1); } }
81
-
82
- /* src/styles/partials/_horizon-colors.css */
83
- @theme { --color-background: var(--color-neutral-950); --color-ring-offset: var(--color-neutral-950); --color-text-primary: var(--color-neutral-50); --color-text-secondary: var(--color-neutral-300); --color-button-danger: var(--color-danger); --color-button-danger--hover: color-mix(in oklab, var(--color-danger) 80%, transparent); --color-button-primary-bg: var(--color-neutral-50); --color-button-primary-bg--disabled: var(--color-neutral-500); --color-button-primary-border: var(--color-neutral-900); --color-button-primary-border--disabled: var(--color-neutral-500); --color-button-primary-text: var(--color-neutral-900); --color-button-primary-text--disabled: var(--color-neutral-200); --color-button-secondary-bg: var(--color-level-two); --color-button-secondary-bg--disabled: var(--color-neutral-500); --color-button-secondary-text: var(--color-neutral-50); --color-button-secondary-text--disabled: var(--color-neutral-200); --color-button-secondary-border: var(--color-neutral-900); --color-button-secondary-border--disabled: var(--color-neutral-500); --color-button-outline-bg: var(--color-transparent); --color-button-outline-text: var(--color-neutral-50); --color-button-outline-text--disabled: var(--color-neutral-400); --color-button-outline-border: var(--color-neutral-50); --color-button-outline-border--disabled: var(--color-neutral-400); --color-card-bg: var(--color-neutral-900-40a); --color-card-bg: color-mix(in oklab, var(--color-neutral-900) 40%, transparent); --color-card-text: var(--color-neutral-50); --color-drawer-bg: var(--color-level-one); --color-slider-track: var(--color-neutral-700); --color-slider-range: var(--color-neutral-50); --color-slider-thumb-border: var(--color-neutral-50); --color-slider-thumb-bg: var(--color-neutral-50); --color-slider-thumb-ring: var(--color-neutral-50); }
84
- :root[data-theme=light] {
85
- --color-background: var(--color-neutral-50);
86
- --color-ring-offset: var(--color-neutral-50);
87
- --color-button-secondary-text: var(--color-neutral-900);
88
- --color-button-secondary-text--hover: var(--color-neutral-900);
89
- --color-button-secondary-text--active: var(--color-neutral-900);
90
- --color-button-secondary-text--disabled: var(--color-neutral-400);
91
- --color-button-secondary-border: 1px solid var(--color-neutral-900);
92
- --color-button-secondary-border--hover: 1px solid var(--color-neutral-200);
93
- --color-button-secondary-border--active: 1px solid var(--color-neutral-200);
94
- --color-button-secondary-border--disabled: 1px solid var(--color-neutral-400);
95
- }
96
-
97
- /* src/styles/partials/_horizon-base-colors.css */
98
- :root {
99
- --color-black: oklch(0 0 0);
100
- --color-white: oklch(1 0 0);
101
- --color-transparent: oklch(0 0 0 / 0%);
102
- --color-accent: oklch(92.53% 0.1976 123.38);
103
- --color-danger: oklch(62.39% 0.2536 28.3);
104
- --color-success: oklch(75.9% 0.2424 144.72);
105
- --color-warning: oklch(74.58% 0.1806 56.91);
106
- --color-neutral-50: oklch(98.51% 0 0);
107
- --color-neutral-100: oklch(92.19% 0 0);
108
- --color-neutral-200: oklch(86.99% 0 0);
109
- --color-neutral-300: oklch(71.55% 0 0);
110
- --color-neutral-400: oklch(55.55% 0 0);
111
- --color-neutral-500: oklch(43.86% 0 0);
112
- --color-neutral-600: oklch(37.15% 0 0);
113
- --color-neutral-700: oklch(32.11% 0 0);
114
- --color-neutral-800: oklch(26.86% 0 0);
115
- --color-neutral-900: oklch(25.2% 0 0);
116
- --color-neutral-950: oklch(23.95% 0.0059 271.17);
117
- --color-level-zero: hsl(232, 11%, 14%);
118
- --color-level-one: hsl(223, 9%, 16%);
119
- --color-level-two: hsl(213, 9%, 19%);
120
- --color-level-three: hsl(213, 8%, 21%);
121
- --color-level-four: hsl(213, 7%, 24%);
122
- --color-primary-50: oklch(97.05% 0.0142 254.6);
123
- --color-primary-100: oklch(93.19% 0.0316 255.59);
124
- --color-primary-200: oklch(88.41% 0.0581 252.44);
125
- --color-primary-300: oklch(80.75% 0.0958 253.19);
126
- --color-primary-400: oklch(71.27% 0.1469 255.61);
127
- --color-primary-500: oklch(62.31% 0.1862 260.06);
128
- --color-primary-600: oklch(54.34% 0.2151 263.01);
129
- --color-primary-700: oklch(49.14% 0.2189 264.03);
130
- --color-primary-800: oklch(42.75% 0.1828 265.08);
131
- --color-primary-900: oklch(37.78% 0.1366 265.11);
132
- --color-primary-950: oklch(28.37% 0.0887 268.75);
133
- }
134
-
135
- /* src/styles/partials/_horizon-theme.css */
136
- @theme { --font-body: "Work Sans", sans-serif; --font-serif: "Bitter", serif; --font-mono: "Source Code Pro", monospace; --animate-fade-in-scale: fade-in-scale 0.3s ease-out; --animate-slide-from-bottom: slide-from-bottom; --animate-slide-to-bottom: slide-to-bottom; @keyframes fade-in-scale { 0% { opacity: 0; transform: scale(0.95); } 100% { opacity: 1; transform: scale(1); } } @keyframes slide-from-bottom { from { transform: translate3d(0, 100%, 0); } to { transform: translate3d(0, 0, 0); } } @keyframes slide-to-bottom { to { transform: translate3d(0, 100%, 0); } } }
137
- @layer base {
138
- :root {
139
- --sidebar: hsl(240, 7%, 97%);
140
- --sidebar-foreground: hsl(240, 17%, 18%);
141
- --sidebar-primary: hsl(240, 17%, 18%);
142
- --sidebar-primary-foreground: oklch(0.985 0 0);
143
- --sidebar-accent: oklch(0.97 0 0);
144
- --sidebar-accent-foreground: oklch(0.205 0 0);
145
- --sidebar-border: hsl(240, 7%, 97%);
146
- --sidebar-ring: oklch(0.708 0 0);
147
- --ring: oklch(0.708 0 0);
148
- }
149
- .dark {
150
- --sidebar: hsl(240, 17%, 18%);
151
- --sidebar-foreground: hsl(240, 7%, 97%);
152
- --sidebar-primary: hsl(240, 7%, 97%);
153
- --sidebar-primary-foreground: oklch(0.985 0 0);
154
- --sidebar-accent: oklch(0.269 0 0);
155
- --sidebar-accent-foreground: oklch(0.985 0 0);
156
- --sidebar-border: hsl(240, 17%, 18%);
157
- --sidebar-ring: oklch(0.439 0 0);
158
- --color-ring-offset: var(--color-neutral-950);
159
- --ring-offset-width: 2px;
160
- }
161
- }
162
-
163
- /* src/styles/main.css */
164
- @keyframes slide-up {
165
- 0% {
166
- transform: translateY(50%);
167
- opacity: 0;
168
- }
169
- 100% {
170
- transform: translateY(0);
171
- opacity: 1;
172
- }
173
- }
174
- @keyframes slide-down {
175
- 0% {
176
- transform: translateY(0);
177
- opacity: 1;
178
- }
179
- 100% {
180
- transform: translateY(50%);
181
- opacity: 0;
182
- }
183
- }
184
- .slide-up {
185
- animation: slide-up 0.3s ease-in-out;
186
- }
187
- .slide-down {
188
- animation: slide-down 0.3s ease-in-out;
189
- }