@equal-experts/kuat-react 0.2.8 → 0.3.0

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.
Files changed (4) hide show
  1. package/README.md +21 -1
  2. package/dist/style.css +1 -1
  3. package/docs/design/logo.md +122 -49
  4. package/package.json +11 -11
package/README.md CHANGED
@@ -40,7 +40,27 @@ pnpm add @radix-ui/react-slot @radix-ui/react-dialog @radix-ui/react-dropdown-me
40
40
  pnpm add lucide-react
41
41
  ```
42
42
 
43
- **Note:** `@equal-experts/kuat-core` is bundled with this package - you don't need to install it separately. Only install the Radix UI packages for the components you actually use.
43
+ **Note:** `@equal-experts/kuat-core` is bundled with this package. You don't need to install it separately when using kuat-react. However, if you want to use design tokens without React components, you can install [`@equal-experts/kuat-core`](https://www.npmjs.com/package/@equal-experts/kuat-core) standalone. See the [kuat-core documentation](https://github.com/equalexperts/kuat-mono/tree/main/packages/kuat-core) for framework-agnostic usage.
44
+
45
+ ### Using Design Tokens Without Components
46
+
47
+ If you only need design tokens (CSS variables, Tailwind preset) without React components, install `@equal-experts/kuat-core` instead:
48
+
49
+ ```bash
50
+ pnpm add @equal-experts/kuat-core
51
+ ```
52
+
53
+ Then import the CSS variables and optionally use the Tailwind preset:
54
+
55
+ ```typescript
56
+ // Import CSS variables
57
+ import '@equal-experts/kuat-core/variables.css';
58
+
59
+ // Or use as a Tailwind preset
60
+ import kuatPreset from '@equal-experts/kuat-core';
61
+ ```
62
+
63
+ See the [kuat-core documentation](https://github.com/equalexperts/kuat-mono/tree/main/packages/kuat-core) for detailed usage with Svelte, Angular, Astro, and other frameworks.
44
64
 
45
65
  ### Recommended: Use Subpath Imports
46
66
 
package/dist/style.css CHANGED
@@ -1 +1 @@
1
- @import"https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap";/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-space-y-reverse:0;--tw-space-x-reverse:0;--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-duration:initial;--tw-ease:initial}}}:root{--font-sans:Lexend,ui-sans-serif,sans-serif,system-ui;--font-serif:Lora,serif;--font-mono:"JetBrains Mono",ui-monospace,monospace}@layer base{:root{--radius:.3rem;--tracking-normal:.01em;--spacing:.25rem;--slate-50:oklch(97.8% .005 240);--slate-100:oklch(93.6% .01 240);--slate-200:oklch(92.9% .013 255.5);--slate-300:oklch(87% .022 255.5);--slate-500:oklch(55.4% .046 257.4);--slate-600:oklch(47.5% .04 257.4);--slate-700:oklch(39.5% .035 257.4);--slate-800:oklch(29.5% .03 257.4);--slate-900:oklch(17.6% .033 244.5);--slate-950:oklch(12.9% .042 264.7);--red-300:oklch(85% .08 25);--red-600:oklch(57.7% .245 27.3);--black:oklch(0% 0 0);--white:oklch(100% 0 0);--ee-blue-50:oklch(94.5% .028 237.5);--ee-blue-100:oklch(88.5% .055 237.5);--ee-blue-200:oklch(82.5% .082 237.5);--ee-blue-300:oklch(76.5% .109 237.5);--ee-blue-400:oklch(70.5% .136 237.5);--ee-blue-500:oklch(64.5% .163 237.5);--ee-blue-600:oklch(58.5% .145 237.5);--ee-blue-700:oklch(52.5% .127 237.5);--ee-blue-800:oklch(36.5% .109 237.5);--ee-blue-900:oklch(24.5% .082 237.5);--ee-blue-950:oklch(14.5% .055 237.5);--tech-blue-50:oklch(93.5% .015 240);--tech-blue-100:oklch(83.5% .03 240);--tech-blue-200:oklch(73.5% .045 240);--tech-blue-300:oklch(63.5% .06 240);--tech-blue-400:oklch(53.5% .075 240);--tech-blue-500:oklch(43.5% .09 240);--tech-blue-600:oklch(36.5% .08 240);--tech-blue-700:oklch(29.5% .07 240);--tech-blue-800:oklch(20.5% .06 240);--tech-blue-900:oklch(12.5% .04 240);--tech-blue-950:oklch(7.5% .025 240);--transform-teal-50:oklch(94.5% .02 185);--transform-teal-100:oklch(88.5% .04 185);--transform-teal-200:oklch(82.5% .06 185);--transform-teal-300:oklch(76.5% .08 185);--transform-teal-400:oklch(70.5% .1 185);--transform-teal-500:oklch(64.5% .12 185);--transform-teal-600:oklch(54.5% .105 185);--transform-teal-700:oklch(44.5% .09 185);--transform-teal-800:oklch(30.5% .075 185);--transform-teal-900:oklch(18.5% .055 185);--transform-teal-950:oklch(10.5% .035 185);--equal-ember-50:oklch(97.5% .035 65);--equal-ember-100:oklch(92.5% .07 65);--equal-ember-200:oklch(87.5% .105 65);--equal-ember-300:oklch(82.5% .14 65);--equal-ember-400:oklch(77.5% .175 65);--equal-ember-500:oklch(62.5% .2 65);--equal-ember-600:oklch(52.5% .18 65);--equal-ember-700:oklch(42.5% .16 65);--equal-ember-800:oklch(32.5% .14 65);--equal-ember-900:oklch(22.5% .12 65);--equal-ember-950:oklch(12.5% .1 65);--brand-ee-blue:var(--ee-blue-500);--brand-tech-blue:var(--tech-blue-500);--brand-transform-teal:var(--transform-teal-500);--brand-equal-ember:var(--equal-ember-500);--brand-dark-data:oklch(20.8% .01 240);--brand-the-cloud:var(--slate-100);--brand-byte-white:var(--white);--brand-ee-blue-accent:var(--ee-blue-50);--background:var(--brand-byte-white);--foreground:var(--slate-950);--primary:var(--brand-ee-blue);--primary-foreground:var(--brand-byte-white);--secondary:var(--brand-transform-teal);--secondary-foreground:var(--brand-byte-white);--muted:var(--slate-100);--muted-foreground:var(--slate-500);--accent:var(--brand-ee-blue-accent);--accent-foreground:var(--slate-950);--destructive:var(--red-600);--destructive-foreground:var(--brand-byte-white);--border:var(--slate-200);--input:var(--brand-byte-white);--ring:var(--slate-300);--card:var(--brand-byte-white);--card-foreground:var(--slate-950);--popover:var(--black);--popover-foreground:var(--brand-byte-white);--chart-1:#1f77b4;--chart-2:#ff7f0e;--chart-3:#2ca02c;--chart-4:#d62728;--chart-5:#9467bd;--sidebar:var(--brand-tech-blue);--sidebar-foreground:var(--brand-byte-white);--sidebar-primary:var(--brand-ee-blue);--sidebar-primary-foreground:var(--brand-ee-blue-accent);--sidebar-accent:var(--slate-200);--sidebar-accent-foreground:var(--brand-tech-blue);--sidebar-border:var(--slate-200);--sidebar-ring:var(--slate-100);--shadow-x:0px;--shadow-y:4px;--shadow-blur:8px;--shadow-spread:-1px;--shadow-opacity:.1;--shadow-color:oklch(20.8% .042 265.755);--shadow-2xs:0px 4px 8px -1px #0f172b0d;--shadow-xs:0px 4px 8px -1px #0f172b0d;--shadow-sm:0px 4px 8px -1px #0f172b1a,0px 1px 2px -2px #0f172b1a;--shadow:0px 4px 8px -1px #0f172b1a,0px 1px 2px -2px #0f172b1a;--shadow-md:0px 4px 8px -1px #0f172b1a,0px 2px 4px -2px #0f172b1a;--shadow-lg:0px 4px 8px -1px #0f172b1a,0px 4px 6px -2px #0f172b1a;--shadow-xl:0px 4px 8px -1px #0f172b1a,0px 8px 10px -2px #0f172b1a;--shadow-2xl:0px 4px 8px -1px #0f172b40}.dark{--background:var(--slate-900);--foreground:var(--brand-byte-white);--primary:var(--brand-ee-blue);--primary-foreground:var(--brand-byte-white);--secondary:var(--brand-transform-teal);--secondary-foreground:var(--brand-byte-white);--muted:var(--slate-100);--muted-foreground:var(--slate-300);--accent:var(--ee-blue-800);--accent-foreground:var(--slate-950);--destructive:var(--red-600);--destructive-foreground:var(--brand-byte-white);--border:var(--slate-700);--input:var(--slate-600);--ring:var(--slate-300);--card:var(--tech-blue-800);--card-foreground:var(--slate-950);--popover:var(--black);--popover-foreground:var(--brand-byte-white);--chart-1:#1f77b4;--chart-2:#ff7f0e;--chart-3:#2ca02c;--chart-4:#d62728;--chart-5:#9467bd;--sidebar:var(--tech-blue-700);--sidebar-foreground:var(--brand-byte-white);--sidebar-primary:var(--brand-ee-blue);--sidebar-primary-foreground:var(--brand-ee-blue-accent);--sidebar-accent:var(--ee-blue-700);--sidebar-accent-foreground:var(--brand-tech-blue);--sidebar-border:var(--slate-200);--sidebar-ring:var(--slate-100);--font-sans:Lexend,ui-sans-serif,sans-serif,system-ui;--font-serif:Lora,serif;--font-mono:"JetBrains Mono",ui-monospace,monospace;--radius:.3rem;--tracking-normal:.01em;--spacing:.25rem;--shadow-x:0px;--shadow-y:4px;--shadow-blur:8px;--shadow-spread:-1px;--shadow-opacity:.1;--shadow-color:#000;--shadow-2xs:0px 4px 8px -1px #0000000d;--shadow-xs:0px 4px 8px -1px #0000000d;--shadow-sm:0px 4px 8px -1px #0000001a,0px 1px 2px -2px #0000001a;--shadow:0px 4px 8px -1px #0000001a,0px 1px 2px -2px #0000001a;--shadow-md:0px 4px 8px -1px #0000001a,0px 2px 4px -2px #0000001a;--shadow-lg:0px 4px 8px -1px #0000001a,0px 4px 6px -2px #0000001a;--shadow-xl:0px 4px 8px -1px #0000001a,0px 8px 10px -2px #0000001a;--shadow-2xl:0px 4px 8px -1px #00000040}:root,:host{--shadow-2xs:var(--shadow-2xs);--shadow-xs:var(--shadow-xs);--shadow-sm:var(--shadow-sm);--shadow:var(--shadow);--shadow-md:var(--shadow-md);--shadow-lg:var(--shadow-lg);--shadow-xl:var(--shadow-xl);--shadow-2xl:var(--shadow-2xl);--tracking-normal:var(--tracking-normal);--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-serif:ui-serif,Georgia,Cambria,"Times New Roman",Times,serif;--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--spacing:.25rem;--container-lg:32rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--font-weight-medium:500;--font-weight-semibold:600;--ease-out:cubic-bezier(0,0,.2,1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}body{letter-spacing:var(--tracking-normal)}*{border-color:var(--border)}body{background-color:var(--background);color:var(--foreground)}*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){-webkit-appearance:button;-moz-appearance:button;appearance:button}::file-selector-button{-webkit-appearance:button;-moz-appearance:button;appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer theme,components;@layer utilities{.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing)*0)}.top-\[50\%\]{top:50%}.left-\[50\%\]{left:50%}.z-50{z-index:50}.\!m-0{margin:calc(var(--spacing)*0)!important}.mt-2{margin-top:calc(var(--spacing)*2)}.flex{display:flex}.grid{display:grid}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing)*4)}.h-9{height:calc(var(--spacing)*9)}.h-10{height:calc(var(--spacing)*10)}.h-11{height:calc(var(--spacing)*11)}.h-\[1px\]{height:1px}.h-full{height:100%}.w-4{width:calc(var(--spacing)*4)}.w-10{width:calc(var(--spacing)*10)}.w-\[1px\]{width:1px}.w-fit{width:fit-content}.w-full{width:100%}.max-w-lg{max-width:var(--container-lg)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.translate-x-\[-50\%\]{--tw-translate-x:-50%;translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-y-\[-50\%\]{--tw-translate-y:-50%;translate:var(--tw-translate-x)var(--tw-translate-y)}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-2{gap:calc(var(--spacing)*2)}.gap-4{gap:calc(var(--spacing)*4)}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*2)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-x-4>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*4)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-x-reverse)))}.self-stretch{align-self:stretch}.overflow-hidden{overflow:hidden}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius)}.rounded-md{border-radius:calc(var(--radius) - 2px)}.border{border-style:var(--tw-border-style);border-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-input{border-color:var(--input)}.border-transparent{border-color:#0000}.bg-background{background-color:var(--background)}.bg-black\/80{background-color:var(--black)}@supports (color:color-mix(in lab,red,red)){.bg-black\/80{background-color:color-mix(in oklab,var(--black)80%,transparent)}}.bg-border{background-color:var(--border)}.bg-destructive{background-color:var(--destructive)}.bg-input{background-color:var(--input)}.bg-muted{background-color:var(--muted)}.bg-primary{background-color:var(--primary)}.bg-secondary{background-color:var(--secondary)}.p-4{padding:calc(var(--spacing)*4)}.p-6{padding:calc(var(--spacing)*6)}.px-2\.5{padding-inline:calc(var(--spacing)*2.5)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-8{padding-inline:calc(var(--spacing)*8)}.py-0\.5{padding-block:calc(var(--spacing)*.5)}.py-2{padding-block:calc(var(--spacing)*2)}.py-4{padding-block:calc(var(--spacing)*4)}.pt-0{padding-top:calc(var(--spacing)*0)}.pb-4{padding-bottom:calc(var(--spacing)*4)}.text-center{text-align:center}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.whitespace-nowrap{white-space:nowrap}.text-destructive-foreground{color:var(--destructive-foreground)}.text-foreground{color:var(--foreground)}.text-muted-foreground{color:var(--muted-foreground)}.text-primary{color:var(--primary)}.text-primary-foreground{color:var(--primary-foreground)}.text-secondary-foreground{color:var(--secondary-foreground)}.underline-offset-4{text-underline-offset:4px}.shadow-lg{--tw-shadow:var(--shadow-lg);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xs{--tw-shadow:var(--shadow-xs);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-offset-background{--tw-ring-offset-color:var(--background)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}@media (hover:hover){.hover\:bg-accent:hover{background-color:var(--accent)}.hover\:bg-destructive\/90:hover{background-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-destructive\/90:hover{background-color:color-mix(in oklab,var(--destructive)90%,transparent)}}.hover\:bg-primary\/90:hover{background-color:var(--primary)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-primary\/90:hover{background-color:color-mix(in oklab,var(--primary)90%,transparent)}}.hover\:bg-secondary\/80:hover{background-color:var(--secondary)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-secondary\/80:hover{background-color:color-mix(in oklab,var(--secondary)80%,transparent)}}.hover\:text-accent-foreground:hover{color:var(--accent-foreground)}.hover\:underline:hover{text-decoration-line:underline}}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\:ring-ring:focus{--tw-ring-color:var(--ring)}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus-visible\:ring-ring:focus-visible{--tw-ring-color:var(--ring)}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:opacity-50:disabled{opacity:.5}.has-\[\>\[data-slot\=button-group\]\]\:gap-2:has(>[data-slot=button-group]){gap:calc(var(--spacing)*2)}.data-\[orientation\=vertical\]\:h-auto[data-orientation=vertical]{height:auto}@media (min-width:40rem){.sm\:mt-0{margin-top:calc(var(--spacing)*0)}.sm\:flex-row{flex-direction:row}.sm\:justify-end{justify-content:flex-end}:where(.sm\:space-x-2>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*2)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-x-reverse)))}.sm\:rounded-lg{border-radius:var(--radius)}.sm\:text-left{text-align:left}}.\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.\[\&_svg\]\:size-4 svg{width:calc(var(--spacing)*4);height:calc(var(--spacing)*4)}.\[\&_svg\]\:shrink-0 svg{flex-shrink:0}.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*=size-]){width:calc(var(--spacing)*4);height:calc(var(--spacing)*4)}.\[\&\>\*\]\:focus-visible\:relative>:focus-visible{position:relative}.\[\&\>\*\]\:focus-visible\:z-10>:focus-visible{z-index:10}.\[\&\>\*\:not\(\:first-child\)\]\:rounded-t-none>:not(:first-child){border-top-left-radius:0;border-top-right-radius:0}.\[\&\>\*\:not\(\:first-child\)\]\:rounded-l-none>:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.\[\&\>\*\:not\(\:first-child\)\]\:border-t-0>:not(:first-child){border-top-style:var(--tw-border-style);border-top-width:0}.\[\&\>\*\:not\(\:first-child\)\]\:border-l-0>:not(:first-child){border-left-style:var(--tw-border-style);border-left-width:0}.\[\&\>\*\:not\(\:last-child\)\]\:rounded-r-none>:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.\[\&\>\*\:not\(\:last-child\)\]\:rounded-b-none>:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0}.has-\[select\[aria-hidden\=true\]\:last-child\]\:\[\&\>\[data-slot\=select-trigger\]\:last-of-type\]\:rounded-r-md:has(:is(select[aria-hidden=true]:last-child))>[data-slot=select-trigger]:last-of-type{border-top-right-radius:calc(var(--radius) - 2px);border-bottom-right-radius:calc(var(--radius) - 2px)}.\[\&\>\[data-slot\=select-trigger\]\:not\(\[class\*\=\'w-\'\]\)\]\:w-fit>[data-slot=select-trigger]:not([class*=w-]){width:fit-content}.\[\&\>input\]\:flex-1>input{flex:1}.\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg{rotate:180deg}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}
1
+ @import"https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap";/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-space-y-reverse:0;--tw-space-x-reverse:0;--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-duration:initial;--tw-ease:initial}}}:root{--font-sans:Lexend,ui-sans-serif,sans-serif,system-ui;--font-serif:Lora,serif;--font-mono:"JetBrains Mono",ui-monospace,monospace}@layer base{:root{--radius:.3rem;--tracking-normal:.01em;--spacing:.25rem;--slate-50:oklch(97.8% .005 240);--slate-100:oklch(93.6% .01 240);--slate-200:oklch(92.9% .013 255.5);--slate-300:oklch(87% .022 255.5);--slate-500:oklch(55.4% .046 257.4);--slate-600:oklch(47.5% .04 257.4);--slate-700:oklch(39.5% .035 257.4);--slate-800:oklch(29.5% .03 257.4);--slate-900:oklch(17.6% .033 244.5);--slate-950:oklch(12.9% .042 264.7);--red-300:oklch(85% .08 25);--red-600:oklch(57.7% .245 27.3);--black:oklch(0% 0 0);--white:oklch(100% 0 0);--ee-blue-50:oklch(94.5% .028 237.5);--ee-blue-100:oklch(88.5% .055 237.5);--ee-blue-200:oklch(82.5% .082 237.5);--ee-blue-300:oklch(76.5% .109 237.5);--ee-blue-400:oklch(70.5% .136 237.5);--ee-blue-500:oklch(64.5% .163 237.5);--ee-blue-600:oklch(58.5% .145 237.5);--ee-blue-700:oklch(52.5% .127 237.5);--ee-blue-800:oklch(36.5% .109 237.5);--ee-blue-900:oklch(24.5% .082 237.5);--ee-blue-950:oklch(14.5% .055 237.5);--tech-blue-50:oklch(93.5% .015 240);--tech-blue-100:oklch(83.5% .03 240);--tech-blue-200:oklch(73.5% .045 240);--tech-blue-300:oklch(63.5% .06 240);--tech-blue-400:oklch(53.5% .075 240);--tech-blue-500:oklch(43.5% .09 240);--tech-blue-600:oklch(36.5% .08 240);--tech-blue-700:oklch(29.5% .07 240);--tech-blue-800:oklch(20.5% .06 240);--tech-blue-900:oklch(12.5% .04 240);--tech-blue-950:oklch(7.5% .025 240);--transform-teal-50:oklch(94.5% .02 185);--transform-teal-100:oklch(88.5% .04 185);--transform-teal-200:oklch(82.5% .06 185);--transform-teal-300:oklch(76.5% .08 185);--transform-teal-400:oklch(70.5% .1 185);--transform-teal-500:oklch(64.5% .12 185);--transform-teal-600:oklch(54.5% .105 185);--transform-teal-700:oklch(44.5% .09 185);--transform-teal-800:oklch(30.5% .075 185);--transform-teal-900:oklch(18.5% .055 185);--transform-teal-950:oklch(10.5% .035 185);--equal-ember-50:oklch(97.5% .035 65);--equal-ember-100:oklch(92.5% .07 65);--equal-ember-200:oklch(87.5% .105 65);--equal-ember-300:oklch(82.5% .14 65);--equal-ember-400:oklch(77.5% .175 65);--equal-ember-500:oklch(62.5% .2 65);--equal-ember-600:oklch(52.5% .18 65);--equal-ember-700:oklch(42.5% .16 65);--equal-ember-800:oklch(32.5% .14 65);--equal-ember-900:oklch(22.5% .12 65);--equal-ember-950:oklch(12.5% .1 65);--brand-ee-blue:var(--ee-blue-500);--brand-tech-blue:var(--tech-blue-500);--brand-transform-teal:var(--transform-teal-500);--brand-equal-ember:var(--equal-ember-500);--brand-dark-data:oklch(20.8% .01 240);--brand-the-cloud:var(--slate-100);--brand-byte-white:var(--white);--brand-ee-blue-accent:var(--ee-blue-50);--background:var(--brand-byte-white);--foreground:var(--slate-950);--primary:var(--brand-ee-blue);--primary-foreground:var(--brand-byte-white);--secondary:var(--brand-transform-teal);--secondary-foreground:var(--brand-byte-white);--muted:var(--slate-100);--muted-foreground:var(--slate-500);--accent:var(--brand-ee-blue-accent);--accent-foreground:var(--slate-950);--destructive:var(--red-600);--destructive-foreground:var(--brand-byte-white);--border:var(--slate-200);--input:var(--brand-byte-white);--ring:var(--slate-300);--card:var(--brand-byte-white);--card-foreground:var(--slate-950);--popover:var(--black);--popover-foreground:var(--brand-byte-white);--chart-1:#1f77b4;--chart-2:#ff7f0e;--chart-3:#2ca02c;--chart-4:#d62728;--chart-5:#9467bd;--sidebar:var(--brand-tech-blue);--sidebar-foreground:var(--brand-byte-white);--sidebar-primary:var(--brand-ee-blue);--sidebar-primary-foreground:var(--brand-ee-blue-accent);--sidebar-accent:var(--slate-200);--sidebar-accent-foreground:var(--brand-tech-blue);--sidebar-border:var(--slate-200);--sidebar-ring:var(--slate-100);--shadow-x:0px;--shadow-y:4px;--shadow-blur:8px;--shadow-spread:-1px;--shadow-opacity:.1;--shadow-color:oklch(20.8% .042 265.755);--shadow-2xs:0px 4px 8px -1px #0f172b0d;--shadow-xs:0px 4px 8px -1px #0f172b0d;--shadow-sm:0px 4px 8px -1px #0f172b1a,0px 1px 2px -2px #0f172b1a;--shadow:0px 4px 8px -1px #0f172b1a,0px 1px 2px -2px #0f172b1a;--shadow-md:0px 4px 8px -1px #0f172b1a,0px 2px 4px -2px #0f172b1a;--shadow-lg:0px 4px 8px -1px #0f172b1a,0px 4px 6px -2px #0f172b1a;--shadow-xl:0px 4px 8px -1px #0f172b1a,0px 8px 10px -2px #0f172b1a;--shadow-2xl:0px 4px 8px -1px #0f172b40}.dark{--background:var(--slate-900);--foreground:var(--brand-byte-white);--primary:var(--brand-ee-blue);--primary-foreground:var(--brand-byte-white);--secondary:var(--brand-transform-teal);--secondary-foreground:var(--brand-byte-white);--muted:var(--slate-100);--muted-foreground:var(--slate-300);--accent:var(--ee-blue-800);--accent-foreground:var(--slate-950);--destructive:var(--red-600);--destructive-foreground:var(--brand-byte-white);--border:var(--slate-700);--input:var(--slate-600);--ring:var(--slate-300);--card:var(--tech-blue-800);--card-foreground:var(--slate-950);--popover:var(--black);--popover-foreground:var(--brand-byte-white);--chart-1:#1f77b4;--chart-2:#ff7f0e;--chart-3:#2ca02c;--chart-4:#d62728;--chart-5:#9467bd;--sidebar:var(--tech-blue-700);--sidebar-foreground:var(--brand-byte-white);--sidebar-primary:var(--brand-ee-blue);--sidebar-primary-foreground:var(--brand-ee-blue-accent);--sidebar-accent:var(--ee-blue-700);--sidebar-accent-foreground:var(--brand-tech-blue);--sidebar-border:var(--slate-200);--sidebar-ring:var(--slate-100);--font-sans:Lexend,ui-sans-serif,sans-serif,system-ui;--font-serif:Lora,serif;--font-mono:"JetBrains Mono",ui-monospace,monospace;--radius:.3rem;--tracking-normal:.01em;--spacing:.25rem;--shadow-x:0px;--shadow-y:4px;--shadow-blur:8px;--shadow-spread:-1px;--shadow-opacity:.1;--shadow-color:#000;--shadow-2xs:0px 4px 8px -1px #0000000d;--shadow-xs:0px 4px 8px -1px #0000000d;--shadow-sm:0px 4px 8px -1px #0000001a,0px 1px 2px -2px #0000001a;--shadow:0px 4px 8px -1px #0000001a,0px 1px 2px -2px #0000001a;--shadow-md:0px 4px 8px -1px #0000001a,0px 2px 4px -2px #0000001a;--shadow-lg:0px 4px 8px -1px #0000001a,0px 4px 6px -2px #0000001a;--shadow-xl:0px 4px 8px -1px #0000001a,0px 8px 10px -2px #0000001a;--shadow-2xl:0px 4px 8px -1px #00000040}:root,:host{--shadow-2xs:var(--shadow-2xs);--shadow-xs:var(--shadow-xs);--shadow-sm:var(--shadow-sm);--shadow:var(--shadow);--shadow-md:var(--shadow-md);--shadow-lg:var(--shadow-lg);--shadow-xl:var(--shadow-xl);--shadow-2xl:var(--shadow-2xl);--tracking-normal:var(--tracking-normal);--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-serif:ui-serif,Georgia,Cambria,"Times New Roman",Times,serif;--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--spacing:.25rem;--container-lg:32rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--font-weight-medium:500;--font-weight-semibold:600;--ease-out:cubic-bezier(0,0,.2,1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}body{letter-spacing:var(--tracking-normal)}*{border-color:var(--border)}body{background-color:var(--background);color:var(--foreground)}*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){-webkit-appearance:button;-moz-appearance:button;appearance:button}::file-selector-button{-webkit-appearance:button;-moz-appearance:button;appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer theme,components;@layer utilities{.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing)*0)}.top-\[50\%\]{top:50%}.left-\[50\%\]{left:50%}.z-50{z-index:50}.\!m-0{margin:calc(var(--spacing)*0)!important}.mt-2{margin-top:calc(var(--spacing)*2)}.flex{display:flex}.grid{display:grid}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing)*4)}.h-9{height:calc(var(--spacing)*9)}.h-10{height:calc(var(--spacing)*10)}.h-11{height:calc(var(--spacing)*11)}.h-\[1px\]{height:1px}.h-full{height:100%}.w-4{width:calc(var(--spacing)*4)}.w-10{width:calc(var(--spacing)*10)}.w-\[1px\]{width:1px}.w-fit{width:fit-content}.w-full{width:100%}.max-w-lg{max-width:var(--container-lg)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.translate-x-\[-50\%\]{--tw-translate-x:-50%;translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-y-\[-50\%\]{--tw-translate-y:-50%;translate:var(--tw-translate-x)var(--tw-translate-y)}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-2{gap:calc(var(--spacing)*2)}.gap-4{gap:calc(var(--spacing)*4)}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*2)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-x-4>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*4)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-x-reverse)))}.self-stretch{align-self:stretch}.overflow-hidden{overflow:hidden}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius)}.rounded-md{border-radius:calc(var(--radius) - 2px)}.border{border-style:var(--tw-border-style);border-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-input{border-color:var(--input)}.border-transparent{border-color:#0000}.bg-background{background-color:var(--background)}.bg-black\/80{background-color:var(--black)}@supports (color:color-mix(in lab,red,red)){.bg-black\/80{background-color:color-mix(in oklab,var(--black)80%,transparent)}}.bg-border{background-color:var(--border)}.bg-destructive{background-color:var(--destructive)}.bg-input{background-color:var(--input)}.bg-muted{background-color:var(--muted)}.bg-primary{background-color:var(--primary)}.bg-secondary{background-color:var(--secondary)}.p-4{padding:calc(var(--spacing)*4)}.p-6{padding:calc(var(--spacing)*6)}.px-2\.5{padding-inline:calc(var(--spacing)*2.5)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-8{padding-inline:calc(var(--spacing)*8)}.py-0\.5{padding-block:calc(var(--spacing)*.5)}.py-2{padding-block:calc(var(--spacing)*2)}.py-4{padding-block:calc(var(--spacing)*4)}.pt-0{padding-top:calc(var(--spacing)*0)}.pb-4{padding-bottom:calc(var(--spacing)*4)}.text-center{text-align:center}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.whitespace-nowrap{white-space:nowrap}.text-destructive-foreground{color:var(--destructive-foreground)}.text-foreground{color:var(--foreground)}.text-muted-foreground{color:var(--muted-foreground)}.text-primary{color:var(--primary)}.text-primary-foreground{color:var(--primary-foreground)}.text-secondary-foreground{color:var(--secondary-foreground)}.underline-offset-4{text-underline-offset:4px}.shadow-lg{--tw-shadow:var(--shadow-lg);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xs{--tw-shadow:var(--shadow-xs);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-offset-background{--tw-ring-offset-color:var(--background)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}@media (hover:hover){.hover\:bg-accent:hover{background-color:var(--accent)}.hover\:bg-destructive\/90:hover{background-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-destructive\/90:hover{background-color:color-mix(in oklab,var(--destructive)90%,transparent)}}.hover\:bg-primary\/90:hover{background-color:var(--primary)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-primary\/90:hover{background-color:color-mix(in oklab,var(--primary)90%,transparent)}}.hover\:bg-secondary\/80:hover{background-color:var(--secondary)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-secondary\/80:hover{background-color:color-mix(in oklab,var(--secondary)80%,transparent)}}.hover\:text-accent-foreground:hover{color:var(--accent-foreground)}.hover\:underline:hover{text-decoration-line:underline}}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\:ring-ring:focus{--tw-ring-color:var(--ring)}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus-visible\:ring-ring:focus-visible{--tw-ring-color:var(--ring)}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:opacity-50:disabled{opacity:.5}.has-\[\>\[data-slot\=button-group\]\]\:gap-2:has(>[data-slot=button-group]){gap:calc(var(--spacing)*2)}.data-\[orientation\=vertical\]\:h-auto[data-orientation=vertical]{height:auto}@media (min-width:40rem){.sm\:mt-0{margin-top:calc(var(--spacing)*0)}.sm\:flex-row{flex-direction:row}.sm\:justify-end{justify-content:flex-end}:where(.sm\:space-x-2>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*2)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-x-reverse)))}.sm\:rounded-lg{border-radius:var(--radius)}.sm\:text-left{text-align:left}}.\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.\[\&_svg\]\:size-4 svg{width:calc(var(--spacing)*4);height:calc(var(--spacing)*4)}.\[\&_svg\]\:shrink-0 svg{flex-shrink:0}.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*=size-]){width:calc(var(--spacing)*4);height:calc(var(--spacing)*4)}.\[\&\>\*\]\:focus-visible\:relative>:focus-visible{position:relative}.\[\&\>\*\]\:focus-visible\:z-10>:focus-visible{z-index:10}.\[\&\>\*\:not\(\:first-child\)\]\:rounded-t-none>:not(:first-child){border-top-left-radius:0;border-top-right-radius:0}.\[\&\>\*\:not\(\:first-child\)\]\:rounded-l-none>:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.\[\&\>\*\:not\(\:first-child\)\]\:border-t-0>:not(:first-child){border-top-style:var(--tw-border-style);border-top-width:0}.\[\&\>\*\:not\(\:first-child\)\]\:border-l-0>:not(:first-child){border-left-style:var(--tw-border-style);border-left-width:0}.\[\&\>\*\:not\(\:last-child\)\]\:rounded-r-none>:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.\[\&\>\*\:not\(\:last-child\)\]\:rounded-b-none>:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0}.has-\[select\[aria-hidden\=true\]\:last-child\]\:\[\&\>\[data-slot\=select-trigger\]\:last-of-type\]\:rounded-r-md:has(:is(select[aria-hidden=true]:last-child))>[data-slot=select-trigger]:last-of-type{border-top-right-radius:calc(var(--radius) - 2px);border-bottom-right-radius:calc(var(--radius) - 2px)}.\[\&\>\[data-slot\=select-trigger\]\:not\(\[class\*\=\'w-\'\]\)\]\:w-fit>[data-slot=select-trigger]:not([class*=w-]){width:fit-content}.\[\&\>input\]\:flex-1>input{flex:1}.\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg{rotate:180deg}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}
package/docs/design/logo.md CHANGED
@@ -62,31 +62,42 @@ The logo maintains a specific aspect ratio. **Never distort or stretch** the log
62
62
 
63
63
  ## Color Variants
64
64
 
65
- ### Primary (Full Color) - Default
65
+ ### Primary (Default) Logos
66
66
 
67
- The full-color logo is the **preferred and default** version for all digital applications.
67
+ The primary logos are the **preferred and default** versions for all digital applications. Choose the correct logo based on background color to ensure contrast ratio compliance.
68
68
 
69
- - **Brand mark**: Blue (#1A9FD9 or similar)
70
- - **Wordmark**: Dark gray/charcoal
71
- - **Background**: White or light-colored backgrounds
69
+ **Primary Logo Files:**
70
+ - **[logo-colour.svg](https://raw.githubusercontent.com/EqualExperts/brand-assets/master/logo/logo-colour.svg)** - Full color logo with blue brand mark and dark wordmark
71
+ - **Use on**: Light backgrounds (white, light gray, light-colored backgrounds)
72
+ - **Brand mark**: Blue (#1A9FD9 or similar)
73
+ - **Wordmark**: Dark gray/charcoal
74
+ - **Usage**: Default choice for most digital interfaces
72
75
 
73
- **Usage:**
74
- - Use by default in all digital interfaces
75
- - Works on white, light gray, and light-colored backgrounds
76
- - Provides maximum brand recognition
76
+ - **[logo-white-text.svg](https://raw.githubusercontent.com/EqualExperts/brand-assets/master/logo/logo-white-text.svg)** - Full color logo with blue brand mark and white wordmark
77
+ - **Use on**: Dark backgrounds that have enough contrast with the blue brand mark
78
+ - **Brand mark**: Blue (#1A9FD9 or similar)
79
+ - **Wordmark**: White
80
+ - **Usage**: Preferred option for dark backgrounds when the blue brand mark maintains sufficient contrast. If there is not enough copntrast, use a monchrome version.
77
81
 
78
- ### Monochrome Versions
82
+ **Key Principle:** Always prefer primary logos over monochrome versions. Primary logos provide maximum brand recognition and should be used whenever possible.
79
83
 
80
- White and black monochrome versions are available for specific use cases.
84
+ ### Monochrome Versions (Secondary)
85
+
86
+ Monochrome versions are **secondary** and should only be used when necessary. These are available for specific use cases where primary logos cannot be used.
81
87
 
82
88
  **Use monochrome versions only when:**
83
- 1. **Contrast requirements**: Background colors would compromise legibility of the full-color version
89
+ 1. **Contrast requirements**: Background colors would compromise legibility of the primary logo versions
84
90
  2. **Partner requests**: Partner organizations specifically request monochrome usage
85
91
  3. **Technical limitations**: Platform or technical constraints prevent full-color usage
86
92
 
87
- **Monochrome Usage Guidelines:**
88
- - **White logo**: Use on dark backgrounds (dark blue, black, dark gray)
89
- - **Black logo**: Use on very light backgrounds when full-color isn't available
93
+ **Monochrome Logo Files:**
94
+ - **[logo-monochrome-white.svg](https://raw.githubusercontent.com/EqualExperts/brand-assets/master/logo/logo-monochrome-white.svg)** - White monochrome logo
95
+ - **Use on**: Dark backgrounds (dark blue, black, dark gray) when primary logo contrast is insufficient
96
+ - **Usage**: Secondary option for dark backgrounds
97
+
98
+ - **[logo-monochrome-black.svg](https://raw.githubusercontent.com/EqualExperts/brand-assets/master/logo/logo-monochrome-black.svg)** - Black monochrome logo
99
+ - **Use on**: Very light backgrounds when primary logo isn't available and monochrome is required
100
+ - **Usage**: Secondary option for light backgrounds when monochrome is specifically needed
90
101
 
91
102
  ---
92
103
 
@@ -104,14 +115,20 @@ The complete logo with both brand mark and wordmark is the **standard and prefer
104
115
 
105
116
  ### Brand Mark Only
106
117
 
107
- The brand mark (bracket-equals symbol only, without text) should **only** be used when:
118
+ The brand mark is the Equal Experts logo without the company name (bracket-equals symbol only, without text). Brand mark variants should **only** be used when:
108
119
 
109
120
  1. **Space constraints**: Space is severely limited (e.g., favicons, small icons)
110
121
  2. **Shape requirements**: The logo must fit within a square or circular shape
111
122
  3. **Decorative use**: Used as a decorative design element in presentations
112
123
  4. **Context clarity**: The context makes it clear this represents Equal Experts
113
124
 
114
- **Never use the wordmark alone** (text without the brand mark).
125
+ **Brand Mark Files:**
126
+ All brand mark variants are available in the [GitHub brand-assets repository](https://github.com/EqualExperts/brand-assets/tree/master/logo) with filenames starting with `brand-mark-...`.
127
+ These include:
128
+ - [White in a blue circle](https://github.com/EqualExperts/brand-assets/blob/master/logo/brand-mark-blue-circle.svg)
129
+ - [Blue in a white circle](https://github.com/EqualExperts/brand-assets/blob/master/logo/brand-mark-blue-over-white-circle.svg)
130
+ - [Blue without circle](https://github.com/EqualExperts/brand-assets/blob/master/logo/brand-mark-blue.svg)
131
+ - [White without circle](https://github.com/EqualExperts/brand-assets/blob/master/logo/brand-mark-monochrome-white.svg)
115
132
 
116
133
  ---
117
134
 
@@ -135,8 +152,9 @@ The brand mark (bracket-equals symbol only, without text) should **only** be use
135
152
  - ✅ Avoid placing in corners or edges without adequate padding
136
153
 
137
154
  4. **Choose appropriate variants**
138
- - ✅ Use full-color version by default
139
- - ✅ Use monochrome versions only when necessary for contrast
155
+ - ✅ Use primary logos (`logo-colour.svg` or `logo-white-text.svg`) by default
156
+ - ✅ Choose logo based on background color to ensure contrast compliance
157
+ - ✅ Use monochrome versions only when necessary for contrast or when specifically requested
140
158
  - ✅ Assess background contrast before choosing variant
141
159
 
142
160
  5. **Ensure accessibility**
@@ -179,20 +197,31 @@ The brand mark (bracket-equals symbol only, without text) should **only** be use
179
197
  ### React Components
180
198
 
181
199
  ```tsx
182
- // Header with full-color logo
200
+ // Header with primary logo on light background
183
201
  <header className="bg-white p-6">
184
202
  <img
185
- src="/logo.svg"
203
+ src="https://raw.githubusercontent.com/EqualExperts/brand-assets/master/logo/logo-colour.svg"
186
204
  alt="Equal Experts"
187
205
  className="w-[120px] min-w-[100px] h-auto"
188
206
  />
189
207
  </header>
190
208
 
191
- // Footer with logo (adequate spacing)
209
+ // Footer with primary logo on dark background (white text version)
192
210
  <footer className="bg-slate-900 p-8">
193
211
  <div className="p-4"> {/* Clear space */}
194
212
  <img
195
- src="/logo-white.svg"
213
+ src="https://raw.githubusercontent.com/EqualExperts/brand-assets/master/logo/logo-white-text.svg"
214
+ alt="Equal Experts"
215
+ className="w-[100px] min-w-[100px] h-auto"
216
+ />
217
+ </div>
218
+ </footer>
219
+
220
+ // Monochrome logo on dark background (when primary logo contrast is insufficient)
221
+ <footer className="bg-black p-8">
222
+ <div className="p-4">
223
+ <img
224
+ src="https://raw.githubusercontent.com/EqualExperts/brand-assets/master/logo/logo-monochrome-white.svg"
196
225
  alt="Equal Experts"
197
226
  className="w-[100px] min-w-[100px] h-auto"
198
227
  />
@@ -202,7 +231,7 @@ The brand mark (bracket-equals symbol only, without text) should **only** be use
202
231
  // Brand mark only (when space is limited)
203
232
  <div className="w-8 h-8">
204
233
  <img
205
- src="/logo-mark-only.svg"
234
+ src="https://raw.githubusercontent.com/EqualExperts/brand-assets/master/logo/brand-mark-colour.svg"
206
235
  alt="Equal Experts"
207
236
  className="w-full h-full"
208
237
  />
@@ -212,20 +241,31 @@ The brand mark (bracket-equals symbol only, without text) should **only** be use
212
241
  ### Vue Components
213
242
 
214
243
  ```vue
215
- <!-- Header with full-color logo -->
244
+ <!-- Header with primary logo on light background -->
216
245
  <header class="bg-white p-6">
217
246
  <img
218
- src="/logo.svg"
247
+ src="https://raw.githubusercontent.com/EqualExperts/brand-assets/master/logo/logo-colour.svg"
219
248
  alt="Equal Experts"
220
249
  class="w-[120px] min-w-[100px] h-auto"
221
250
  />
222
251
  </header>
223
252
 
224
- <!-- Footer with logo (adequate spacing) -->
253
+ <!-- Footer with primary logo on dark background (white text version) -->
225
254
  <footer class="bg-slate-900 p-8">
226
255
  <div class="p-4"> <!-- Clear space -->
227
256
  <img
228
- src="/logo-white.svg"
257
+ src="https://raw.githubusercontent.com/EqualExperts/brand-assets/master/logo/logo-white-text.svg"
258
+ alt="Equal Experts"
259
+ class="w-[100px] min-w-[100px] h-auto"
260
+ />
261
+ </div>
262
+ </footer>
263
+
264
+ <!-- Monochrome logo on dark background (when primary logo contrast is insufficient) -->
265
+ <footer class="bg-black p-8">
266
+ <div class="p-4">
267
+ <img
268
+ src="https://raw.githubusercontent.com/EqualExperts/brand-assets/master/logo/logo-monochrome-white.svg"
229
269
  alt="Equal Experts"
230
270
  class="w-[100px] min-w-[100px] h-auto"
231
271
  />
@@ -235,7 +275,7 @@ The brand mark (bracket-equals symbol only, without text) should **only** be use
235
275
  <!-- Brand mark only (when space is limited) -->
236
276
  <div class="w-8 h-8">
237
277
  <img
238
- src="/logo-mark-only.svg"
278
+ src="https://raw.githubusercontent.com/EqualExperts/brand-assets/master/logo/brand-mark-colour.svg"
239
279
  alt="Equal Experts"
240
280
  class="w-full h-full"
241
281
  />
@@ -266,19 +306,23 @@ The brand mark (bracket-equals symbol only, without text) should **only** be use
266
306
  ### Background Considerations
267
307
 
268
308
  1. **Light Backgrounds**
269
- - Use full-color logo (default)
309
+ - Use **[logo-colour.svg](https://raw.githubusercontent.com/EqualExperts/brand-assets/master/logo/logo-colour.svg)** (primary logo with dark text)
270
310
  - Ensure adequate contrast
271
311
  - Test readability
312
+ - Only use monochrome black if specifically required
272
313
 
273
314
  2. **Dark Backgrounds**
274
- - Use white monochrome version
275
- - Verify contrast meets accessibility standards
315
+ - **First choice**: Use **[logo-white-text.svg](https://raw.githubusercontent.com/EqualExperts/brand-assets/master/logo/logo-white-text.svg)** (primary logo with white text) when the blue brand mark maintains sufficient contrast
316
+ - **Secondary choice**: Use **[logo-monochrome-white.svg](https://raw.githubusercontent.com/EqualExperts/brand-assets/master/logo/logo-monochrome-white.svg)** (monochrome white) when primary logo contrast is insufficient
317
+ - Verify contrast meets accessibility standards (WCAG AA)
276
318
  - Test in both light and dark modes
277
319
 
278
320
  3. **Colored Backgrounds**
279
321
  - Assess contrast before choosing variant
280
- - Use monochrome if full-color lacks contrast
322
+ - Prefer primary logos (`logo-colour.svg` or `logo-white-text.svg`) when possible
323
+ - Use monochrome versions only when primary logos lack sufficient contrast
281
324
  - Never compromise legibility
325
+ - Always ensure contrast ratio compliance
282
326
 
283
327
  ### Size Considerations
284
328
 
@@ -303,11 +347,14 @@ The brand mark (bracket-equals symbol only, without text) should **only** be use
303
347
 
304
348
  ### Contrast Requirements
305
349
 
306
- The logo must maintain sufficient contrast against its background:
350
+ The logo must maintain sufficient contrast against its background. Choose the correct logo variant to ensure WCAG AA contrast compliance:
307
351
 
308
- - **Full-color logo**: Works on white and light backgrounds
309
- - **White monochrome**: Use on dark backgrounds (WCAG AA contrast)
310
- - **Black monochrome**: Use on very light backgrounds
352
+ - **Primary logos**:
353
+ - `logo-colour.svg` - Works on white and light backgrounds
354
+ - `logo-white-text.svg` - Works on dark backgrounds when blue brand mark maintains sufficient contrast
355
+ - **Monochrome logos** (secondary, use only when necessary):
356
+ - `logo-monochrome-white.svg` - Use on dark backgrounds when primary logo contrast is insufficient (WCAG AA contrast)
357
+ - `logo-monochrome-black.svg` - Use on very light backgrounds when monochrome is specifically required
311
358
 
312
359
  ### Alt Text
313
360
 
@@ -333,15 +380,39 @@ Always provide descriptive alt text for logo images:
333
380
 
334
381
  ### Official Logo Assets
335
382
 
336
- - **Primary Logo (SVG)**: [Equal Experts Logo](https://www.equalexperts.com/wp-content/uploads/2024/10/2024-Logo.svg)
337
- - **Brand Guidelines**: Refer to official Equal Experts brand guidelines for complete specifications
383
+ All logo files are publicly available in the [Equal Experts brand-assets GitHub repository](https://github.com/EqualExperts/brand-assets/tree/master/logo).
384
+
385
+ #### Primary Logos (Default)
386
+
387
+ - **[logo-colour.svg](https://raw.githubusercontent.com/EqualExperts/brand-assets/master/logo/logo-colour.svg)** - Full color logo with blue brand mark and dark wordmark (for light backgrounds)
388
+ - **[logo-white-text.svg](https://raw.githubusercontent.com/EqualExperts/brand-assets/master/logo/logo-white-text.svg)** - Full color logo with blue brand mark and white wordmark (for dark backgrounds)
389
+
390
+ #### Monochrome Logos (Secondary)
391
+
392
+ - **[logo-monochrome-white.svg](https://raw.githubusercontent.com/EqualExperts/brand-assets/master/logo/logo-monochrome-white.svg)** - White monochrome logo (for dark backgrounds when primary logo contrast is insufficient)
393
+ - **[logo-monochrome-black.svg](https://raw.githubusercontent.com/EqualExperts/brand-assets/master/logo/logo-monochrome-black.svg)** - Black monochrome logo (for light backgrounds when monochrome is specifically required)
394
+
395
+ #### Brand Marks
396
+
397
+ All brand mark variants are available in the [logo directory](https://github.com/EqualExperts/brand-assets/tree/master/logo) with filenames starting with `brand-mark-...`. These include:
398
+ - `brand-mark-colour.svg` - Color brand mark
399
+ - `brand-mark-white-text.svg` - Brand mark with white text
400
+ - `brand-mark-monochrome-white.svg` - White monochrome brand mark
401
+ - `brand-mark-monochrome-black.svg` - Black monochrome brand mark
402
+
403
+ ### GitHub Repository
404
+
405
+ - **Repository**: [EqualExperts/brand-assets](https://github.com/EqualExperts/brand-assets)
406
+ - **Logo Directory**: [logo/](https://github.com/EqualExperts/brand-assets/tree/master/logo)
407
+ - **Direct File Access**: Use `raw.githubusercontent.com` URLs for direct file access in code
338
408
 
339
409
  ### Implementation Notes
340
410
 
341
411
  1. **Asset Format**: Prefer SVG for digital use (scalable, crisp at all sizes)
342
- 2. **File Naming**: Use descriptive names (e.g., `logo-full-color.svg`, `logo-white.svg`, `logo-mark-only.svg`)
343
- 3. **Storage**: Store logo assets in project `public/` or `assets/` directory
344
- 4. **Version Control**: Include logo assets in version control or reference from CDN
412
+ 2. **File Naming**: Use official file names from the brand-assets repository
413
+ 3. **Storage**: Store logo assets in project `public/` or `assets/` directory, or reference directly from GitHub
414
+ 4. **Version Control**: Include logo assets in version control or reference from GitHub raw URLs
415
+ 5. **CDN Usage**: GitHub raw URLs can be used directly as CDN links in production applications
345
416
 
346
417
  ---
347
418
 
@@ -359,9 +430,9 @@ Logo clear space should align with the design system's 8-point grid:
359
430
 
360
431
  When placing logos on design system backgrounds:
361
432
 
362
- - **Light backgrounds**: Use `bg-background` or `bg-card` with full-color logo
363
- - **Dark backgrounds**: Use `bg-slate-900` or `bg-slate-950` with white monochrome logo
364
- - **Brand backgrounds**: Use EE Blue (`bg-primary`) with white monochrome logo
433
+ - **Light backgrounds**: Use `bg-background` or `bg-card` with `logo-colour.svg` (primary logo)
434
+ - **Dark backgrounds**: Use `bg-slate-900` or `bg-slate-950` with `logo-white-text.svg` (primary logo) or `logo-monochrome-white.svg` (if contrast requires)
435
+ - **Brand backgrounds**: Use EE Blue (`bg-primary`) with `logo-white-text.svg` (primary logo) or `logo-monochrome-white.svg` (if contrast requires)
365
436
 
366
437
  ---
367
438
 
@@ -376,8 +447,10 @@ When placing logos on design system backgrounds:
376
447
 
377
448
  ## Notes
378
449
 
379
- - **Brand Asset Protection:** The Equal Experts logo is a valuable brand asset—always use official files
380
- - **Consistency First:** When in doubt, use the full-color logo with adequate clear space
450
+ - **Brand Asset Protection:** The Equal Experts logo is a valuable brand asset—always use official files from the [brand-assets repository](https://github.com/EqualExperts/brand-assets)
451
+ - **Consistency First:** When in doubt, use the primary logo (`logo-colour.svg` or `logo-white-text.svg`) with adequate clear space
452
+ - **Primary Over Monochrome:** Always prefer primary logos over monochrome versions for maximum brand recognition
453
+ - **Background-Based Selection:** Choose the correct logo variant based on background color to ensure contrast compliance
381
454
  - **Size Priority:** Never compromise minimum size requirements—use brand mark only if space is constrained
382
- - **Accessibility Always:** Ensure logo contrast meets WCAG standards in all contexts
383
- - **Official Assets Only:** Never recreate or modify the logo—always use official brand resources
455
+ - **Accessibility Always:** Ensure logo contrast meets WCAG AA standards in all contexts
456
+ - **Official Assets Only:** Never recreate or modify the logo—always use official brand resources from the GitHub repository
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@equal-experts/kuat-react",
3
- "version": "0.2.8",
3
+ "version": "0.3.0",
4
4
  "type": "module",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.js",
@@ -53,12 +53,20 @@
53
53
  "url": "https://github.com/your-org/kuat-mono.git",
54
54
  "directory": "packages/kuat-react"
55
55
  },
56
+ "scripts": {
57
+ "copy-docs": "node scripts/copy-docs.js",
58
+ "setup-docs": "node scripts/setup-docs.js",
59
+ "build": "vite build",
60
+ "dev": "vite build --watch",
61
+ "lint": "eslint . --max-warnings 0"
62
+ },
56
63
  "dependencies": {
57
64
  "class-variance-authority": "^0.7.0",
58
65
  "clsx": "^2.1.0",
59
66
  "tailwind-merge": "^2.2.1"
60
67
  },
61
68
  "devDependencies": {
69
+ "@equal-experts/kuat-core": "^0.3.0",
62
70
  "@tailwindcss/vite": "^4.0.0",
63
71
  "@types/react": "^19.0.0",
64
72
  "@types/react-dom": "^19.0.0",
@@ -68,8 +76,7 @@
68
76
  "tailwindcss": "^4.0.0",
69
77
  "typescript": "^5.3.3",
70
78
  "vite": "^5.1.0",
71
- "vite-plugin-dts": "^3.6.4",
72
- "@equal-experts/kuat-core": "0.2.6"
79
+ "vite-plugin-dts": "^3.6.4"
73
80
  },
74
81
  "peerDependencies": {
75
82
  "react": "^18.2.0 || ^19.0.0",
@@ -101,12 +108,5 @@
101
108
  "@radix-ui/react-toggle-group": "^1.0.3",
102
109
  "@radix-ui/react-tooltip": "^1.0.7",
103
110
  "lucide-react": "^0.344.0 || >=0.400.0"
104
- },
105
- "scripts": {
106
- "copy-docs": "node scripts/copy-docs.js",
107
- "setup-docs": "node scripts/setup-docs.js",
108
- "build": "vite build",
109
- "dev": "vite build --watch",
110
- "lint": "eslint . --max-warnings 0"
111
111
  }
112
- }
112
+ }