@x-green/components 0.1.0 → 0.2.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 (11) hide show
  1. package/README.md +11 -36
  2. package/dist/components/index.d.ts +0 -1
  3. package/dist/index.css +1 -1
  4. package/dist/index.d.ts +0 -1
  5. package/dist/index.js +1 -416
  6. package/package.json +2 -2
  7. package/dist/tokens/index.d.ts +0 -8
  8. package/dist/tokens/primitives/colors.d.ts +0 -234
  9. package/dist/tokens/primitives/typography.d.ts +0 -32
  10. package/dist/tokens/semantic/colors.d.ts +0 -201
  11. package/dist/tokens/semantic/typography.d.ts +0 -100
package/README.md CHANGED
@@ -1,18 +1,18 @@
1
1
  # XGreen UI
2
2
 
3
- Tipografia, cores e componentes do Design System em TypeScript. A entrada pública é `src/index.ts`. React e Vite servem a amostra (`/tipografia`, `/cores`, `/componentes/botao`).
3
+ Tipografia, cores e componentes do Design System em TypeScript. O pacote npm exporta só os componentes (`Button`). React e Vite servem a amostra (`/tipografia`, `/cores`, `/componentes/botao`).
4
4
 
5
5
  No app que instalar o pacote:
6
6
 
7
7
  ```tsx
8
8
  import { Button } from '@x-green/components'
9
9
 
10
- <Button>
10
+ <Button className="w-full">
11
11
  Continuar
12
12
  </Button>
13
13
  ```
14
14
 
15
- O CSS do `Button` entra junto com o import. Não precisa importar um arquivo de estilo.
15
+ O CSS do `Button` entra junto com o import. Não precisa importar um arquivo de estilo. No `className`, o IntelliSense do Tailwind sugere classes se a extensão **Tailwind CSS IntelliSense** estiver instalada.
16
16
 
17
17
  ## Executar e validar
18
18
 
@@ -46,7 +46,7 @@ src/
46
46
  │ ├── primitives/colors.ts
47
47
  │ ├── semantic/typography.ts
48
48
  │ ├── semantic/colors.ts # Primary e estados do botão
49
- │ ├── index.ts # Tokens e tipos públicos
49
+ │ ├── index.ts # Tokens da amostra (não saem no pacote)
50
50
  │ └── tailwind.ts # Adaptador para o Tailwind
51
51
  ├── components/
52
52
  │ └── button.tsx # Button com tailwind-variants
@@ -56,14 +56,14 @@ src/
56
56
  │ ├── cores/
57
57
  │ └── componentes/
58
58
  ├── routes/ # Páginas da demonstração (TanStack Router)
59
- ├── index.ts # Reexporta tokens e componentes (entrada do npm)
59
+ ├── index.ts # Reexporta só os componentes (entrada do npm)
60
60
  ├── index.lib.ts # Entrada do build da lib (importa o CSS)
61
61
  ├── lib.css # Tailwind compilado para o pacote
62
62
  ├── index.css # Tailwind e estilos da amostra
63
63
  └── main.tsx # RouterProvider
64
64
  ```
65
65
 
66
- Os primitivos são a origem dos valores. Os tokens semânticos de tipografia reutilizam `fontFamily`, `fontWeight`, `fontSize` e `lineHeight`. Tokens semânticos de cor ainda não existem: o Figma definiu só as famílias primitivas. Todos usam `as const`; os tipos são derivados dos valores e exportados por `src/tokens/index.ts` e pela entrada `src/index.ts`.
66
+ Os primitivos são a origem dos valores. Os tokens semânticos de tipografia reutilizam `fontFamily`, `fontWeight`, `fontSize` e `lineHeight`. Tokens semânticos de cor ainda não existem: o Figma definiu só as famílias primitivas. Todos usam `as const`; os tipos são derivados dos valores. Tokens ficam em `src/tokens/` para a amostra e para o CSS do `Button`; o pacote não os exporta.
67
67
 
68
68
  ## Primitivos de tipografia
69
69
 
@@ -159,45 +159,20 @@ import { Button } from '@x-green/components'
159
159
  </Button>
160
160
  ```
161
161
 
162
- As exportações públicas incluem `colors`, `colorShadeOpacity`, `colorCssVariables`, `colorCssVars` e os tipos `Colors`, `ColorFamilyName`, `ColorFamily`, `ColorShade` e `ColorCssVars`. Os tokens de cores são constantes TypeScript e podem ser consumidos sem Tailwind; somente o adaptador opcional `src/tokens/tailwind.ts` depende dele.
162
+ As paletas primitivas e os papéis semânticos ficam em `src/tokens/` para a amostra e para o CSS do `Button`. Não são exportados pelo pacote nesta versão.
163
163
 
164
164
  ## Consumir em React
165
165
 
166
- Exemplo no app que instalou o pacote:
167
-
168
- ```tsx
169
- import { colors, typography } from '@x-green/components'
170
-
171
- <h1
172
- style={{
173
- ...typography['heading-h1'],
174
- color: colors.neutral[900],
175
- backgroundColor: colors.neutral[25],
176
- }}
177
- >
178
- Design System
179
- </h1>
180
- ```
181
-
182
- Também estão disponíveis `fontFamily`, `fontWeight`, `fontSize`, `lineHeight` e os tipos `FontFamily`, `FontWeight`, `FontSize`, `LineHeight`, `TypographyToken` e `TypographyTokenName`.
183
-
184
- ## Consumir com Tailwind
185
-
186
- O pacote já entrega o CSS do `Button`. Para usar tokens no layout do seu app (`heading-h1`, `bg-primary`), configure o Tailwind 4 com o plugin do DS. Sem isso, só os componentes importados de `@x-green/components` vêm estilizados.
187
-
188
166
  ```tsx
189
167
  import { Button } from '@x-green/components'
190
168
 
191
- <section className="border border-neutral-200 bg-neutral-25 text-neutral-900">
192
- <h1 className="heading-h1">Design System</h1>
193
- <p className="body-md">Texto usando os tokens de tipografia e a paleta primitiva.</p>
194
- </section>
195
- <a className="body-md-link text-green-800 underline" href="#typography">Ver tipografia</a>
196
- <Button>
197
- Botão de exemplo
169
+ <Button className="w-full">
170
+ Continuar
198
171
  </Button>
199
172
  ```
200
173
 
174
+ O pacote exporta `Button` e o tipo `ButtonProps`. Tokens de cor e tipografia ficam no repositório da amostra, não no pacote.
175
+
201
176
  ## Fonte padrão
202
177
 
203
178
  Por enquanto, o projeto usa a fonte padrão do Tailwind, sem arquivos de fontes personalizados, imports adicionais ou downloads de fontes. Importar `@x-green/components` injeta o CSS dos componentes. A variável `--default-font-family` segue a fonte padrão do Tailwind.
package/dist/components/index.d.ts CHANGED
@@ -1,3 +1,2 @@
1
1
  export { Button } from './button';
2
2
  export type { ButtonProps } from './button';
3
- export { buttonVariants } from './button-variants';
package/dist/index.css CHANGED
@@ -1,3 +1,3 @@
1
1
  /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
2
- @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-border-style:solid;--tw-outline-style:solid}}}@layer theme{:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-white:#fff;--spacing:.25rem;--radius-lg:.5rem;--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)}}@layer base{*,: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%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, 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;-webkit-text-decoration:inherit;-webkit-text-decoration: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:where(:not(iframe)){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]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}:root{--color-neutral-25:#ebf0f6;--color-neutral-25-opacity:5%;--color-neutral-50:#e5eaf1;--color-neutral-50-opacity:10%;--color-neutral-100:#dae0e7;--color-neutral-100-opacity:20%;--color-neutral-200:#c5cad3;--color-neutral-200-opacity:40%;--color-neutral-300:#afb5c0;--color-neutral-300-opacity:60%;--color-neutral-400:#9a9fac;--color-neutral-400-opacity:80%;--color-neutral-500:#848a98;--color-neutral-500-opacity:100%;--color-neutral-600:#6a6e7a;--color-neutral-600-opacity:80%;--color-neutral-700:#4f535b;--color-neutral-700-opacity:60%;--color-neutral-800:#35373d;--color-neutral-800-opacity:40%;--color-neutral-900:#1a1c1e;--color-neutral-900-opacity:20%;--color-neutral-950:#0d0e0f;--color-neutral-950-opacity:10%;--color-green-50:#e6f6ef;--color-green-50-opacity:10%;--color-green-100:#cceccc;--color-green-100-opacity:20%;--color-green-200:#99d999;--color-green-200-opacity:40%;--color-green-300:#66c766;--color-green-300-opacity:60%;--color-green-400:#33b433;--color-green-400-opacity:80%;--color-green-500:#00a000;--color-green-500-opacity:100%;--color-green-600:#008100;--color-green-600-opacity:80%;--color-green-700:#006100;--color-green-700-opacity:60%;--color-green-800:#004000;--color-green-800-opacity:40%;--color-green-900:#002000;--color-green-900-opacity:20%;--color-green-950:#001000;--color-green-950-opacity:10%;--color-blue-50:#e6ecf6;--color-blue-50-opacity:10%;--color-blue-100:#ccd9ec;--color-blue-100-opacity:20%;--color-blue-200:#99b3d9;--color-blue-200-opacity:40%;--color-blue-300:#668cc6;--color-blue-300-opacity:60%;--color-blue-400:#3366b3;--color-blue-400-opacity:80%;--color-blue-500:#0040a0;--color-blue-500-opacity:100%;--color-blue-600:#003380;--color-blue-600-opacity:80%;--color-blue-700:#002660;--color-blue-700-opacity:60%;--color-blue-800:#001a40;--color-blue-800-opacity:40%;--color-blue-900:#000d20;--color-blue-900-opacity:20%;--color-blue-950:#000610;--color-blue-950-opacity:10%;--color-purple-50:#ede6f6;--color-purple-50-opacity:10%;--color-purple-100:#dbccec;--color-purple-100-opacity:20%;--color-purple-200:#b899d9;--color-purple-200-opacity:40%;--color-purple-300:#9466c6;--color-purple-300-opacity:60%;--color-purple-400:#7133b3;--color-purple-400-opacity:80%;--color-purple-500:#4d00a0;--color-purple-500-opacity:100%;--color-purple-600:#3e0080;--color-purple-600-opacity:80%;--color-purple-700:#2e0060;--color-purple-700-opacity:60%;--color-purple-800:#1f0040;--color-purple-800-opacity:40%;--color-purple-900:#0f0020;--color-purple-900-opacity:20%;--color-purple-950:#080010;--color-purple-950-opacity:10%;--color-red-50:#fdecec;--color-red-50-opacity:10%;--color-red-100:#fbd8d8;--color-red-100-opacity:20%;--color-red-200:#f7b1b1;--color-red-200-opacity:40%;--color-red-300:#f28a8a;--color-red-300-opacity:60%;--color-red-400:#ee6363;--color-red-400-opacity:80%;--color-red-500:#ea3c3c;--color-red-500-opacity:100%;--color-red-600:#bb3030;--color-red-600-opacity:80%;--color-red-700:#8c2424;--color-red-700-opacity:60%;--color-red-800:#5e1818;--color-red-800-opacity:40%;--color-red-900:#2f0c0c;--color-red-900-opacity:20%;--color-red-950:#170606;--color-red-950-opacity:10%;--color-orange-50:#fff1e8;--color-orange-50-opacity:10%;--color-orange-100:#ffe4d0;--color-orange-100-opacity:20%;--color-orange-200:#ffc8a1;--color-orange-200-opacity:40%;--color-orange-300:#ffad73;--color-orange-300-opacity:60%;--color-orange-400:#ff9144;--color-orange-400-opacity:80%;--color-orange-500:#ff7615;--color-orange-500-opacity:100%;--color-orange-600:#cc5e11;--color-orange-600-opacity:80%;--color-orange-700:#99470d;--color-orange-700-opacity:60%;--color-orange-800:#662f08;--color-orange-800-opacity:40%;--color-orange-900:#331804;--color-orange-900-opacity:20%;--color-orange-950:#190c02;--color-orange-950-opacity:10%;--color-yellow-50:#fff8e8;--color-yellow-50-opacity:10%;--color-yellow-100:#fff2d0;--color-yellow-100-opacity:20%;--color-yellow-200:#ffe5a1;--color-yellow-200-opacity:40%;--color-yellow-300:#ffd773;--color-yellow-300-opacity:60%;--color-yellow-400:#ffca44;--color-yellow-400-opacity:80%;--color-yellow-500:#ffbd15;--color-yellow-500-opacity:100%;--color-yellow-600:#cc9711;--color-yellow-600-opacity:80%;--color-yellow-700:#99710d;--color-yellow-700-opacity:60%;--color-yellow-800:#664c08;--color-yellow-800-opacity:40%;--color-yellow-900:#332604;--color-yellow-900-opacity:20%;--color-yellow-950:#191302;--color-yellow-950-opacity:10%;--color-cyan-50:#e8fffc;--color-cyan-50-opacity:10%;--color-cyan-100:#d0fffa;--color-cyan-100-opacity:20%;--color-cyan-200:#a1fff4;--color-cyan-200-opacity:40%;--color-cyan-300:#73ffef;--color-cyan-300-opacity:60%;--color-cyan-400:#44ffe9;--color-cyan-400-opacity:80%;--color-cyan-500:#15ffe4;--color-cyan-500-opacity:100%;--color-cyan-600:#11ccb6;--color-cyan-600-opacity:80%;--color-cyan-700:#0d9989;--color-cyan-700-opacity:60%;--color-cyan-800:#08665b;--color-cyan-800-opacity:40%;--color-cyan-900:#04332e;--color-cyan-900-opacity:20%;--color-cyan-950:#021917;--color-cyan-950-opacity:10%;--color-primary:#008149;--color-primary-hover:#006137;--color-outline:#f0f5fb;--color-error:#bb3030;--color-error-hover:#8c2424}}@layer components;@layer utilities{.box-border{box-sizing:border-box}.inline-flex{display:inline-flex}.h-\[44px\]{height:44px}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:calc(var(--spacing) * 2)}.rounded-lg{border-radius:var(--radius-lg)}.border{border-style:var(--tw-border-style);border-width:1px}.border-solid{--tw-border-style:solid;border-style:solid}.border-error{border-color:#bb3030}.border-neutral-200{border-color:#c5cad3}.border-primary{border-color:#008149}.border-transparent{border-color:#0000}.bg-error{background-color:#bb3030}.bg-outline{background-color:#f0f5fb}.bg-primary{background-color:#008149}.bg-transparent{background-color:#0000}.px-3{padding-inline:calc(var(--spacing) * 3)}.body-lg,.body-lg-link{font-family:var(--default-font-family);font-size:20px;font-weight:400;line-height:24px}.body-lg-semibold{font-family:var(--default-font-family);font-size:20px;font-weight:600;line-height:24px}.body-md,.body-md-link{font-family:var(--default-font-family);font-size:16px;font-weight:400;line-height:20px}.body-md-semibold{font-family:var(--default-font-family);font-size:16px;font-weight:600;line-height:20px}.body-sm,.body-sm-link{font-family:var(--default-font-family);font-size:14px;font-weight:400;line-height:16px}.body-sm-semibold{font-family:var(--default-font-family);font-size:14px;font-weight:600;line-height:16px}.caption{font-family:var(--default-font-family);font-size:12px;font-weight:400;line-height:16px}.heading-h1{font-family:var(--default-font-family);font-size:60px;font-weight:600;line-height:72px}.heading-h2{font-family:var(--default-font-family);font-size:48px;font-weight:600;line-height:56px}.heading-h3{font-family:var(--default-font-family);font-size:40px;font-weight:600;line-height:48px}.heading-h4{font-family:var(--default-font-family);font-size:32px;font-weight:600;line-height:40px}.heading-h5{font-family:var(--default-font-family);font-size:24px;font-weight:600;line-height:28px}.heading-h6{font-family:var(--default-font-family);font-size:20px;font-weight:600;line-height:24px}.text-error{color:#bb3030}.text-neutral-800{color:#35373d}.text-primary{color:#008149}.text-white{color:var(--color-white)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.outline-error{outline-color:#bb3030}.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))}@media (hover:hover){.hover\:border-error-hover:hover{border-color:#8c2424}.hover\:border-neutral-300:hover{border-color:#afb5c0}.hover\:border-primary-hover:hover{border-color:#006137}.hover\:border-transparent:hover{border-color:#0000}.hover\:bg-error-hover:hover{background-color:#8c2424}.hover\:bg-neutral-50:hover{background-color:#e5eaf1}.hover\:bg-outline:hover{background-color:#f0f5fb}.hover\:bg-primary-hover:hover{background-color:#006137}.hover\:bg-transparent:hover{background-color:#0000}.hover\:text-error-hover:hover{color:#8c2424}.hover\:text-neutral-800:hover{color:#35373d}.hover\:text-neutral-900:hover{color:#1a1c1e}.hover\:text-primary-hover:hover{color:#006137}}.focus-visible\:isolate:focus-visible{isolation:isolate}.focus-visible\:border-error:focus-visible{border-color:#bb3030}.focus-visible\:border-neutral-200:focus-visible{border-color:#c5cad3}.focus-visible\:border-primary:focus-visible{border-color:#008149}.focus-visible\:border-transparent:focus-visible{border-color:#0000}.focus-visible\:bg-error:focus-visible{background-color:#bb3030}.focus-visible\:bg-outline:focus-visible{background-color:#f0f5fb}.focus-visible\:bg-primary:focus-visible{background-color:#008149}.focus-visible\:bg-transparent:focus-visible{background-color:#0000}.focus-visible\:text-error:focus-visible{color:#bb3030}.focus-visible\:text-neutral-800:focus-visible{color:#35373d}.focus-visible\:text-primary:focus-visible{color:#008149}.focus-visible\:outline-2:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px}.focus-visible\:outline-offset-2:focus-visible{outline-offset:2px}.focus-visible\:outline-error:focus-visible{outline-color:#bb3030}.focus-visible\:outline-primary:focus-visible{outline-color:#008149}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:border-neutral-500:disabled{border-color:#848a98}.disabled\:border-transparent:disabled{border-color:#0000}.disabled\:bg-neutral-50:disabled{background-color:#e5eaf1}.disabled\:bg-transparent:disabled{background-color:#0000}.disabled\:text-neutral-500:disabled{color:#848a98}.data-\[status\=focus\]\:isolate[data-status=focus]{isolation:isolate}.data-\[status\=focus\]\:border-error[data-status=focus]{border-color:#bb3030}.data-\[status\=focus\]\:border-neutral-200[data-status=focus]{border-color:#c5cad3}.data-\[status\=focus\]\:border-primary[data-status=focus]{border-color:#008149}.data-\[status\=focus\]\:border-transparent[data-status=focus]{border-color:#0000}.data-\[status\=focus\]\:bg-error[data-status=focus]{background-color:#bb3030}.data-\[status\=focus\]\:bg-outline[data-status=focus]{background-color:#f0f5fb}.data-\[status\=focus\]\:bg-primary[data-status=focus]{background-color:#008149}.data-\[status\=focus\]\:bg-transparent[data-status=focus]{background-color:#0000}.data-\[status\=focus\]\:text-error[data-status=focus]{color:#bb3030}.data-\[status\=focus\]\:text-neutral-800[data-status=focus]{color:#35373d}.data-\[status\=focus\]\:text-primary[data-status=focus]{color:#008149}.data-\[status\=focus\]\:outline-2[data-status=focus]{outline-style:var(--tw-outline-style);outline-width:2px}.data-\[status\=focus\]\:outline-offset-2[data-status=focus]{outline-offset:2px}.data-\[status\=focus\]\:outline-error[data-status=focus]{outline-color:#bb3030}.data-\[status\=focus\]\:outline-primary[data-status=focus]{outline-color:#008149}.data-\[status\=hover\]\:border-error-hover[data-status=hover]{border-color:#8c2424}.data-\[status\=hover\]\:border-neutral-300[data-status=hover]{border-color:#afb5c0}.data-\[status\=hover\]\:border-primary-hover[data-status=hover]{border-color:#006137}.data-\[status\=hover\]\:border-transparent[data-status=hover]{border-color:#0000}.data-\[status\=hover\]\:bg-error-hover[data-status=hover]{background-color:#8c2424}.data-\[status\=hover\]\:bg-neutral-50[data-status=hover]{background-color:#e5eaf1}.data-\[status\=hover\]\:bg-outline[data-status=hover]{background-color:#f0f5fb}.data-\[status\=hover\]\:bg-primary-hover[data-status=hover]{background-color:#006137}.data-\[status\=hover\]\:bg-transparent[data-status=hover]{background-color:#0000}.data-\[status\=hover\]\:text-error-hover[data-status=hover]{color:#8c2424}.data-\[status\=hover\]\:text-neutral-800[data-status=hover]{color:#35373d}.data-\[status\=hover\]\:text-neutral-900[data-status=hover]{color:#1a1c1e}.data-\[status\=hover\]\:text-primary-hover[data-status=hover]{color:#006137}}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}
2
+ @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-border-style:solid;--tw-outline-style:solid}}}@layer theme{:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-neutral-50:#e5eaf1;--color-neutral-200:#c5cad3;--color-neutral-300:#afb5c0;--color-neutral-500:#848a98;--color-neutral-800:#35373d;--color-neutral-900:#1a1c1e;--color-white:#fff;--spacing:.25rem;--radius-lg:.5rem;--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);--color-primary:#008149;--color-primary-hover:#006137;--color-outline:#f0f5fb;--color-error:#bb3030;--color-error-hover:#8c2424}}@layer base{*,: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%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, 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;-webkit-text-decoration:inherit;-webkit-text-decoration: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:where(:not(iframe)){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]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}:root{--color-neutral-25:#ebf0f6;--color-neutral-25-opacity:5%;--color-neutral-50:#e5eaf1;--color-neutral-50-opacity:10%;--color-neutral-100:#dae0e7;--color-neutral-100-opacity:20%;--color-neutral-200:#c5cad3;--color-neutral-200-opacity:40%;--color-neutral-300:#afb5c0;--color-neutral-300-opacity:60%;--color-neutral-400:#9a9fac;--color-neutral-400-opacity:80%;--color-neutral-500:#848a98;--color-neutral-500-opacity:100%;--color-neutral-600:#6a6e7a;--color-neutral-600-opacity:80%;--color-neutral-700:#4f535b;--color-neutral-700-opacity:60%;--color-neutral-800:#35373d;--color-neutral-800-opacity:40%;--color-neutral-900:#1a1c1e;--color-neutral-900-opacity:20%;--color-neutral-950:#0d0e0f;--color-neutral-950-opacity:10%;--color-green-50:#e6f6ef;--color-green-50-opacity:10%;--color-green-100:#cceccc;--color-green-100-opacity:20%;--color-green-200:#99d999;--color-green-200-opacity:40%;--color-green-300:#66c766;--color-green-300-opacity:60%;--color-green-400:#33b433;--color-green-400-opacity:80%;--color-green-500:#00a000;--color-green-500-opacity:100%;--color-green-600:#008100;--color-green-600-opacity:80%;--color-green-700:#006100;--color-green-700-opacity:60%;--color-green-800:#004000;--color-green-800-opacity:40%;--color-green-900:#002000;--color-green-900-opacity:20%;--color-green-950:#001000;--color-green-950-opacity:10%;--color-blue-50:#e6ecf6;--color-blue-50-opacity:10%;--color-blue-100:#ccd9ec;--color-blue-100-opacity:20%;--color-blue-200:#99b3d9;--color-blue-200-opacity:40%;--color-blue-300:#668cc6;--color-blue-300-opacity:60%;--color-blue-400:#3366b3;--color-blue-400-opacity:80%;--color-blue-500:#0040a0;--color-blue-500-opacity:100%;--color-blue-600:#003380;--color-blue-600-opacity:80%;--color-blue-700:#002660;--color-blue-700-opacity:60%;--color-blue-800:#001a40;--color-blue-800-opacity:40%;--color-blue-900:#000d20;--color-blue-900-opacity:20%;--color-blue-950:#000610;--color-blue-950-opacity:10%;--color-purple-50:#ede6f6;--color-purple-50-opacity:10%;--color-purple-100:#dbccec;--color-purple-100-opacity:20%;--color-purple-200:#b899d9;--color-purple-200-opacity:40%;--color-purple-300:#9466c6;--color-purple-300-opacity:60%;--color-purple-400:#7133b3;--color-purple-400-opacity:80%;--color-purple-500:#4d00a0;--color-purple-500-opacity:100%;--color-purple-600:#3e0080;--color-purple-600-opacity:80%;--color-purple-700:#2e0060;--color-purple-700-opacity:60%;--color-purple-800:#1f0040;--color-purple-800-opacity:40%;--color-purple-900:#0f0020;--color-purple-900-opacity:20%;--color-purple-950:#080010;--color-purple-950-opacity:10%;--color-red-50:#fdecec;--color-red-50-opacity:10%;--color-red-100:#fbd8d8;--color-red-100-opacity:20%;--color-red-200:#f7b1b1;--color-red-200-opacity:40%;--color-red-300:#f28a8a;--color-red-300-opacity:60%;--color-red-400:#ee6363;--color-red-400-opacity:80%;--color-red-500:#ea3c3c;--color-red-500-opacity:100%;--color-red-600:#bb3030;--color-red-600-opacity:80%;--color-red-700:#8c2424;--color-red-700-opacity:60%;--color-red-800:#5e1818;--color-red-800-opacity:40%;--color-red-900:#2f0c0c;--color-red-900-opacity:20%;--color-red-950:#170606;--color-red-950-opacity:10%;--color-orange-50:#fff1e8;--color-orange-50-opacity:10%;--color-orange-100:#ffe4d0;--color-orange-100-opacity:20%;--color-orange-200:#ffc8a1;--color-orange-200-opacity:40%;--color-orange-300:#ffad73;--color-orange-300-opacity:60%;--color-orange-400:#ff9144;--color-orange-400-opacity:80%;--color-orange-500:#ff7615;--color-orange-500-opacity:100%;--color-orange-600:#cc5e11;--color-orange-600-opacity:80%;--color-orange-700:#99470d;--color-orange-700-opacity:60%;--color-orange-800:#662f08;--color-orange-800-opacity:40%;--color-orange-900:#331804;--color-orange-900-opacity:20%;--color-orange-950:#190c02;--color-orange-950-opacity:10%;--color-yellow-50:#fff8e8;--color-yellow-50-opacity:10%;--color-yellow-100:#fff2d0;--color-yellow-100-opacity:20%;--color-yellow-200:#ffe5a1;--color-yellow-200-opacity:40%;--color-yellow-300:#ffd773;--color-yellow-300-opacity:60%;--color-yellow-400:#ffca44;--color-yellow-400-opacity:80%;--color-yellow-500:#ffbd15;--color-yellow-500-opacity:100%;--color-yellow-600:#cc9711;--color-yellow-600-opacity:80%;--color-yellow-700:#99710d;--color-yellow-700-opacity:60%;--color-yellow-800:#664c08;--color-yellow-800-opacity:40%;--color-yellow-900:#332604;--color-yellow-900-opacity:20%;--color-yellow-950:#191302;--color-yellow-950-opacity:10%;--color-cyan-50:#e8fffc;--color-cyan-50-opacity:10%;--color-cyan-100:#d0fffa;--color-cyan-100-opacity:20%;--color-cyan-200:#a1fff4;--color-cyan-200-opacity:40%;--color-cyan-300:#73ffef;--color-cyan-300-opacity:60%;--color-cyan-400:#44ffe9;--color-cyan-400-opacity:80%;--color-cyan-500:#15ffe4;--color-cyan-500-opacity:100%;--color-cyan-600:#11ccb6;--color-cyan-600-opacity:80%;--color-cyan-700:#0d9989;--color-cyan-700-opacity:60%;--color-cyan-800:#08665b;--color-cyan-800-opacity:40%;--color-cyan-900:#04332e;--color-cyan-900-opacity:20%;--color-cyan-950:#021917;--color-cyan-950-opacity:10%;--color-primary:#008149;--color-primary-hover:#006137;--color-outline:#f0f5fb;--color-error:#bb3030;--color-error-hover:#8c2424}}@layer components;@layer utilities{.box-border{box-sizing:border-box}.inline-flex{display:inline-flex}.h-\[44px\]{height:44px}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:calc(var(--spacing) * 2)}.rounded-lg{border-radius:var(--radius-lg)}.border{border-style:var(--tw-border-style);border-width:1px}.border-solid{--tw-border-style:solid;border-style:solid}.border-error{border-color:var(--color-error)}.border-neutral-200{border-color:var(--color-neutral-200)}.border-primary{border-color:var(--color-primary)}.border-transparent{border-color:#0000}.bg-error{background-color:var(--color-error)}.bg-outline{background-color:var(--color-outline)}.bg-primary{background-color:var(--color-primary)}.bg-transparent{background-color:#0000}.px-3{padding-inline:calc(var(--spacing) * 3)}.body-lg,.body-lg-link{font-family:var(--default-font-family);font-size:20px;font-weight:400;line-height:24px}.body-lg-semibold{font-family:var(--default-font-family);font-size:20px;font-weight:600;line-height:24px}.body-md,.body-md-link{font-family:var(--default-font-family);font-size:16px;font-weight:400;line-height:20px}.body-md-semibold{font-family:var(--default-font-family);font-size:16px;font-weight:600;line-height:20px}.body-sm,.body-sm-link{font-family:var(--default-font-family);font-size:14px;font-weight:400;line-height:16px}.body-sm-semibold{font-family:var(--default-font-family);font-size:14px;font-weight:600;line-height:16px}.caption{font-family:var(--default-font-family);font-size:12px;font-weight:400;line-height:16px}.heading-h1{font-family:var(--default-font-family);font-size:60px;font-weight:600;line-height:72px}.heading-h2{font-family:var(--default-font-family);font-size:48px;font-weight:600;line-height:56px}.heading-h3{font-family:var(--default-font-family);font-size:40px;font-weight:600;line-height:48px}.heading-h4{font-family:var(--default-font-family);font-size:32px;font-weight:600;line-height:40px}.heading-h5{font-family:var(--default-font-family);font-size:24px;font-weight:600;line-height:28px}.heading-h6{font-family:var(--default-font-family);font-size:20px;font-weight:600;line-height:24px}.text-error{color:var(--color-error)}.text-neutral-800{color:var(--color-neutral-800)}.text-primary{color:var(--color-primary)}.text-white{color:var(--color-white)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.outline-error{outline-color:var(--color-error)}.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))}@media (hover:hover){.hover\:border-error-hover:hover{border-color:var(--color-error-hover)}.hover\:border-neutral-300:hover{border-color:var(--color-neutral-300)}.hover\:border-primary-hover:hover{border-color:var(--color-primary-hover)}.hover\:border-transparent:hover{border-color:#0000}.hover\:bg-error-hover:hover{background-color:var(--color-error-hover)}.hover\:bg-neutral-50:hover{background-color:var(--color-neutral-50)}.hover\:bg-outline:hover{background-color:var(--color-outline)}.hover\:bg-primary-hover:hover{background-color:var(--color-primary-hover)}.hover\:bg-transparent:hover{background-color:#0000}.hover\:text-error-hover:hover{color:var(--color-error-hover)}.hover\:text-neutral-800:hover{color:var(--color-neutral-800)}.hover\:text-neutral-900:hover{color:var(--color-neutral-900)}.hover\:text-primary-hover:hover{color:var(--color-primary-hover)}}.focus-visible\:isolate:focus-visible{isolation:isolate}.focus-visible\:border-error:focus-visible{border-color:var(--color-error)}.focus-visible\:border-neutral-200:focus-visible{border-color:var(--color-neutral-200)}.focus-visible\:border-primary:focus-visible{border-color:var(--color-primary)}.focus-visible\:border-transparent:focus-visible{border-color:#0000}.focus-visible\:bg-error:focus-visible{background-color:var(--color-error)}.focus-visible\:bg-outline:focus-visible{background-color:var(--color-outline)}.focus-visible\:bg-primary:focus-visible{background-color:var(--color-primary)}.focus-visible\:bg-transparent:focus-visible{background-color:#0000}.focus-visible\:text-error:focus-visible{color:var(--color-error)}.focus-visible\:text-neutral-800:focus-visible{color:var(--color-neutral-800)}.focus-visible\:text-primary:focus-visible{color:var(--color-primary)}.focus-visible\:outline-2:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px}.focus-visible\:outline-offset-2:focus-visible{outline-offset:2px}.focus-visible\:outline-error:focus-visible{outline-color:var(--color-error)}.focus-visible\:outline-primary:focus-visible{outline-color:var(--color-primary)}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:border-neutral-500:disabled{border-color:var(--color-neutral-500)}.disabled\:border-transparent:disabled{border-color:#0000}.disabled\:bg-neutral-50:disabled{background-color:var(--color-neutral-50)}.disabled\:bg-transparent:disabled{background-color:#0000}.disabled\:text-neutral-500:disabled{color:var(--color-neutral-500)}.data-\[status\=focus\]\:isolate[data-status=focus]{isolation:isolate}.data-\[status\=focus\]\:border-error[data-status=focus]{border-color:var(--color-error)}.data-\[status\=focus\]\:border-neutral-200[data-status=focus]{border-color:var(--color-neutral-200)}.data-\[status\=focus\]\:border-primary[data-status=focus]{border-color:var(--color-primary)}.data-\[status\=focus\]\:border-transparent[data-status=focus]{border-color:#0000}.data-\[status\=focus\]\:bg-error[data-status=focus]{background-color:var(--color-error)}.data-\[status\=focus\]\:bg-outline[data-status=focus]{background-color:var(--color-outline)}.data-\[status\=focus\]\:bg-primary[data-status=focus]{background-color:var(--color-primary)}.data-\[status\=focus\]\:bg-transparent[data-status=focus]{background-color:#0000}.data-\[status\=focus\]\:text-error[data-status=focus]{color:var(--color-error)}.data-\[status\=focus\]\:text-neutral-800[data-status=focus]{color:var(--color-neutral-800)}.data-\[status\=focus\]\:text-primary[data-status=focus]{color:var(--color-primary)}.data-\[status\=focus\]\:outline-2[data-status=focus]{outline-style:var(--tw-outline-style);outline-width:2px}.data-\[status\=focus\]\:outline-offset-2[data-status=focus]{outline-offset:2px}.data-\[status\=focus\]\:outline-error[data-status=focus]{outline-color:var(--color-error)}.data-\[status\=focus\]\:outline-primary[data-status=focus]{outline-color:var(--color-primary)}.data-\[status\=hover\]\:border-error-hover[data-status=hover]{border-color:var(--color-error-hover)}.data-\[status\=hover\]\:border-neutral-300[data-status=hover]{border-color:var(--color-neutral-300)}.data-\[status\=hover\]\:border-primary-hover[data-status=hover]{border-color:var(--color-primary-hover)}.data-\[status\=hover\]\:border-transparent[data-status=hover]{border-color:#0000}.data-\[status\=hover\]\:bg-error-hover[data-status=hover]{background-color:var(--color-error-hover)}.data-\[status\=hover\]\:bg-neutral-50[data-status=hover]{background-color:var(--color-neutral-50)}.data-\[status\=hover\]\:bg-outline[data-status=hover]{background-color:var(--color-outline)}.data-\[status\=hover\]\:bg-primary-hover[data-status=hover]{background-color:var(--color-primary-hover)}.data-\[status\=hover\]\:bg-transparent[data-status=hover]{background-color:#0000}.data-\[status\=hover\]\:text-error-hover[data-status=hover]{color:var(--color-error-hover)}.data-\[status\=hover\]\:text-neutral-800[data-status=hover]{color:var(--color-neutral-800)}.data-\[status\=hover\]\:text-neutral-900[data-status=hover]{color:var(--color-neutral-900)}.data-\[status\=hover\]\:text-primary-hover[data-status=hover]{color:var(--color-primary-hover)}}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}
3
3
  /*$vite$:1*/
package/dist/index.d.ts CHANGED
@@ -1,2 +1 @@
1
1
  export * from './components';
2
- export * from './tokens';
package/dist/index.js CHANGED
@@ -105,419 +105,4 @@ function o({ variant: e, className: n, type: r = "button", children: i, ...o })
105
105
  });
106
106
  }
107
107
  //#endregion
108
- //#region src/tokens/primitives/colors.ts
109
- var s = {
110
- 25: "5%",
111
- 50: "10%",
112
- 100: "20%",
113
- 200: "40%",
114
- 300: "60%",
115
- 400: "80%",
116
- 500: "100%",
117
- 600: "80%",
118
- 700: "60%",
119
- 800: "40%",
120
- 900: "20%",
121
- 950: "10%"
122
- }, c = {
123
- neutral: {
124
- 25: "#EBF0F6",
125
- 50: "#E5EAF1",
126
- 100: "#DAE0E7",
127
- 200: "#C5CAD3",
128
- 300: "#AFB5C0",
129
- 400: "#9A9FAC",
130
- 500: "#848A98",
131
- 600: "#6A6E7A",
132
- 700: "#4F535B",
133
- 800: "#35373D",
134
- 900: "#1A1C1E",
135
- 950: "#0D0E0F"
136
- },
137
- green: {
138
- 50: "#E6F6EF",
139
- 100: "#CCECCC",
140
- 200: "#99D999",
141
- 300: "#66C766",
142
- 400: "#33B433",
143
- 500: "#00A000",
144
- 600: "#008100",
145
- 700: "#006100",
146
- 800: "#004000",
147
- 900: "#002000",
148
- 950: "#001000"
149
- },
150
- blue: {
151
- 50: "#E6ECF6",
152
- 100: "#CCD9EC",
153
- 200: "#99B3D9",
154
- 300: "#668CC6",
155
- 400: "#3366B3",
156
- 500: "#0040A0",
157
- 600: "#003380",
158
- 700: "#002660",
159
- 800: "#001A40",
160
- 900: "#000D20",
161
- 950: "#000610"
162
- },
163
- purple: {
164
- 50: "#EDE6F6",
165
- 100: "#DBCCEC",
166
- 200: "#B899D9",
167
- 300: "#9466C6",
168
- 400: "#7133B3",
169
- 500: "#4D00A0",
170
- 600: "#3E0080",
171
- 700: "#2E0060",
172
- 800: "#1F0040",
173
- 900: "#0F0020",
174
- 950: "#080010"
175
- },
176
- red: {
177
- 50: "#FDECEC",
178
- 100: "#FBD8D8",
179
- 200: "#F7B1B1",
180
- 300: "#F28A8A",
181
- 400: "#EE6363",
182
- 500: "#EA3C3C",
183
- 600: "#BB3030",
184
- 700: "#8C2424",
185
- 800: "#5E1818",
186
- 900: "#2F0C0C",
187
- 950: "#170606"
188
- },
189
- orange: {
190
- 50: "#FFF1E8",
191
- 100: "#FFE4D0",
192
- 200: "#FFC8A1",
193
- 300: "#FFAD73",
194
- 400: "#FF9144",
195
- 500: "#FF7615",
196
- 600: "#CC5E11",
197
- 700: "#99470D",
198
- 800: "#662F08",
199
- 900: "#331804",
200
- 950: "#190C02"
201
- },
202
- yellow: {
203
- 50: "#FFF8E8",
204
- 100: "#FFF2D0",
205
- 200: "#FFE5A1",
206
- 300: "#FFD773",
207
- 400: "#FFCA44",
208
- 500: "#FFBD15",
209
- 600: "#CC9711",
210
- 700: "#99710D",
211
- 800: "#664C08",
212
- 900: "#332604",
213
- 950: "#191302"
214
- },
215
- cyan: {
216
- 50: "#E8FFFC",
217
- 100: "#D0FFFA",
218
- 200: "#A1FFF4",
219
- 300: "#73FFEF",
220
- 400: "#44FFE9",
221
- 500: "#15FFE4",
222
- 600: "#11CCB6",
223
- 700: "#0D9989",
224
- 800: "#08665B",
225
- 900: "#04332E",
226
- 950: "#021917"
227
- }
228
- };
229
- function l(e) {
230
- return s[Number(e)];
231
- }
232
- function u(e) {
233
- let t = c[e];
234
- return Object.fromEntries(Object.keys(t).map((t) => [t, `var(--color-${e}-${t})`]));
235
- }
236
- var d = Object.fromEntries(Object.entries(c).flatMap(([e, t]) => Object.entries(t).flatMap(([t, n]) => [[`--color-${e}-${t}`, n], [`--color-${e}-${t}-opacity`, l(t)]]))), f = {
237
- neutral: u("neutral"),
238
- green: u("green"),
239
- blue: u("blue"),
240
- purple: u("purple"),
241
- red: u("red"),
242
- orange: u("orange"),
243
- yellow: u("yellow"),
244
- cyan: u("cyan")
245
- }, p = { sans: "var(--default-font-family)" }, m = {
246
- regular: 400,
247
- semibold: 600
248
- }, h = {
249
- xs: "12px",
250
- sm: "14px",
251
- md: "16px",
252
- lg: "20px",
253
- xl: "24px",
254
- "2xl": "32px",
255
- "3xl": "40px",
256
- "4xl": "48px",
257
- "5xl": "60px"
258
- }, g = {
259
- 16: h.md,
260
- 20: h.lg,
261
- 24: h.xl,
262
- 28: "28px",
263
- 40: h["3xl"],
264
- 48: h["4xl"],
265
- 56: "56px",
266
- 72: "72px"
267
- }, _ = {
268
- primary: "#008149",
269
- "primary-hover": "#006137",
270
- outline: "#F0F5FB",
271
- error: "#BB3030",
272
- "error-hover": "#8C2424"
273
- }, v = {
274
- "--color-primary": _.primary,
275
- "--color-primary-hover": _["primary-hover"],
276
- "--color-outline": _.outline,
277
- "--color-error": _.error,
278
- "--color-error-hover": _["error-hover"]
279
- }, y = {
280
- background: c.neutral[50],
281
- border: c.neutral[500],
282
- text: c.neutral[500]
283
- }, b = {
284
- primary: {
285
- default: {
286
- background: _.primary,
287
- border: _.primary
288
- },
289
- hover: {
290
- background: _["primary-hover"],
291
- border: _["primary-hover"]
292
- },
293
- focus: {
294
- background: _.primary,
295
- border: _.primary
296
- },
297
- disabled: y
298
- },
299
- outline: {
300
- default: {
301
- background: _.outline,
302
- border: _.primary
303
- },
304
- hover: {
305
- background: _.outline,
306
- border: _["primary-hover"]
307
- },
308
- focus: {
309
- background: _.outline,
310
- border: _.primary
311
- },
312
- disabled: y
313
- },
314
- transparent: {
315
- default: {
316
- background: "transparent",
317
- border: "transparent",
318
- text: _.primary
319
- },
320
- hover: {
321
- background: "transparent",
322
- border: "transparent",
323
- text: _["primary-hover"]
324
- },
325
- focus: {
326
- background: "transparent",
327
- border: "transparent",
328
- text: _.primary
329
- },
330
- disabled: {
331
- background: "transparent",
332
- border: "transparent",
333
- text: c.neutral[500]
334
- }
335
- },
336
- error: {
337
- default: {
338
- background: _.error,
339
- border: _.error
340
- },
341
- hover: {
342
- background: _["error-hover"],
343
- border: _["error-hover"]
344
- },
345
- focus: {
346
- background: _.error,
347
- border: _.error
348
- },
349
- disabled: y
350
- },
351
- "outline-error": {
352
- default: {
353
- background: _.outline,
354
- border: _.error,
355
- text: _.error
356
- },
357
- hover: {
358
- background: _.outline,
359
- border: _["error-hover"],
360
- text: _["error-hover"]
361
- },
362
- focus: {
363
- background: _.outline,
364
- border: _.error,
365
- text: _.error
366
- },
367
- disabled: y
368
- },
369
- "transparent-error": {
370
- default: {
371
- background: "transparent",
372
- border: "transparent",
373
- text: _.error
374
- },
375
- hover: {
376
- background: "transparent",
377
- border: "transparent",
378
- text: _["error-hover"]
379
- },
380
- focus: {
381
- background: "transparent",
382
- border: "transparent",
383
- text: _.error
384
- },
385
- disabled: {
386
- background: "transparent",
387
- border: "transparent",
388
- text: c.neutral[500]
389
- }
390
- },
391
- neutral: {
392
- default: {
393
- background: _.outline,
394
- border: c.neutral[200],
395
- text: c.neutral[800]
396
- },
397
- hover: {
398
- background: c.neutral[50],
399
- border: c.neutral[300],
400
- text: c.neutral[800]
401
- },
402
- focus: {
403
- background: _.outline,
404
- border: c.neutral[200],
405
- text: c.neutral[800]
406
- },
407
- disabled: y
408
- },
409
- "outline-neutral": {
410
- default: {
411
- background: _.outline,
412
- border: c.neutral[200],
413
- text: c.neutral[800]
414
- },
415
- hover: {
416
- background: _.outline,
417
- border: c.neutral[300],
418
- text: c.neutral[800]
419
- },
420
- focus: {
421
- background: _.outline,
422
- border: c.neutral[200],
423
- text: c.neutral[800]
424
- },
425
- disabled: y
426
- },
427
- "transparent-neutral": {
428
- default: {
429
- background: "transparent",
430
- border: "transparent",
431
- text: c.neutral[800]
432
- },
433
- hover: {
434
- background: "transparent",
435
- border: "transparent",
436
- text: c.neutral[900]
437
- },
438
- focus: {
439
- background: "transparent",
440
- border: "transparent",
441
- text: c.neutral[800]
442
- },
443
- disabled: {
444
- background: "transparent",
445
- border: "transparent",
446
- text: c.neutral[500]
447
- }
448
- }
449
- }, x = {
450
- fontFamily: p.sans,
451
- fontWeight: m.regular
452
- }, S = {
453
- ...x,
454
- fontWeight: m.semibold
455
- }, C = {
456
- ...x,
457
- fontSize: h.sm,
458
- lineHeight: g[16]
459
- }, w = {
460
- ...x,
461
- fontSize: h.md,
462
- lineHeight: g[20]
463
- }, T = {
464
- ...x,
465
- fontSize: h.lg,
466
- lineHeight: g[24]
467
- }, E = {
468
- "heading-h1": {
469
- ...S,
470
- fontSize: h["5xl"],
471
- lineHeight: g[72]
472
- },
473
- "heading-h2": {
474
- ...S,
475
- fontSize: h["4xl"],
476
- lineHeight: g[56]
477
- },
478
- "heading-h3": {
479
- ...S,
480
- fontSize: h["3xl"],
481
- lineHeight: g[48]
482
- },
483
- "heading-h4": {
484
- ...S,
485
- fontSize: h["2xl"],
486
- lineHeight: g[40]
487
- },
488
- "heading-h5": {
489
- ...S,
490
- fontSize: h.xl,
491
- lineHeight: g[28]
492
- },
493
- "heading-h6": {
494
- ...S,
495
- fontSize: h.lg,
496
- lineHeight: g[24]
497
- },
498
- "body-sm": C,
499
- "body-sm-semibold": {
500
- ...C,
501
- fontWeight: m.semibold
502
- },
503
- "body-sm-link": C,
504
- "body-md": w,
505
- "body-md-link": w,
506
- "body-md-semibold": {
507
- ...w,
508
- fontWeight: m.semibold
509
- },
510
- "body-lg": T,
511
- "body-lg-link": T,
512
- "body-lg-semibold": {
513
- ...T,
514
- fontWeight: m.semibold
515
- },
516
- caption: {
517
- ...x,
518
- fontSize: h.xs,
519
- lineHeight: g[16]
520
- }
521
- };
522
- //#endregion
523
- export { o as Button, b as button, a as buttonVariants, d as colorCssVariables, f as colorCssVars, s as colorShadeOpacity, c as colors, p as fontFamily, h as fontSize, m as fontWeight, g as lineHeight, v as semanticColorCssVariables, _ as semanticColors, E as typography };
108
+ export { o as Button };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@x-green/components",
3
- "version": "0.1.0",
4
- "description": "Design system Xgreen: tokens e componentes React.",
3
+ "version": "0.2.0",
4
+ "description": "Design system Xgreen: componentes React.",
5
5
  "type": "module",
6
6
  "license": "UNLICENSED",
7
7
  "publishConfig": {
package/dist/tokens/index.d.ts DELETED
@@ -1,8 +0,0 @@
1
- export { colorCssVariables, colorCssVars, colors, colorShadeOpacity, } from './primitives/colors';
2
- export type { ColorCssVars, ColorFamily, ColorFamilyName, Colors, ColorShade, } from './primitives/colors';
3
- export { fontFamily, fontSize, fontWeight, lineHeight, } from './primitives/typography';
4
- export type { FontFamily, FontSize, FontWeight, LineHeight, } from './primitives/typography';
5
- export { button, semanticColorCssVariables, semanticColors } from './semantic/colors';
6
- export type { ButtonTokens, SemanticColors } from './semantic/colors';
7
- export { typography } from './semantic/typography';
8
- export type { TypographyToken, TypographyTokenName, } from './semantic/typography';
package/dist/tokens/primitives/colors.d.ts DELETED
@@ -1,234 +0,0 @@
1
- export declare const colorShadeOpacity: {
2
- readonly 25: "5%";
3
- readonly 50: "10%";
4
- readonly 100: "20%";
5
- readonly 200: "40%";
6
- readonly 300: "60%";
7
- readonly 400: "80%";
8
- readonly 500: "100%";
9
- readonly 600: "80%";
10
- readonly 700: "60%";
11
- readonly 800: "40%";
12
- readonly 900: "20%";
13
- readonly 950: "10%";
14
- };
15
- export declare const colors: {
16
- readonly neutral: {
17
- readonly 25: "#EBF0F6";
18
- readonly 50: "#E5EAF1";
19
- readonly 100: "#DAE0E7";
20
- readonly 200: "#C5CAD3";
21
- readonly 300: "#AFB5C0";
22
- readonly 400: "#9A9FAC";
23
- readonly 500: "#848A98";
24
- readonly 600: "#6A6E7A";
25
- readonly 700: "#4F535B";
26
- readonly 800: "#35373D";
27
- readonly 900: "#1A1C1E";
28
- readonly 950: "#0D0E0F";
29
- };
30
- readonly green: {
31
- readonly 50: "#E6F6EF";
32
- readonly 100: "#CCECCC";
33
- readonly 200: "#99D999";
34
- readonly 300: "#66C766";
35
- readonly 400: "#33B433";
36
- readonly 500: "#00A000";
37
- readonly 600: "#008100";
38
- readonly 700: "#006100";
39
- readonly 800: "#004000";
40
- readonly 900: "#002000";
41
- readonly 950: "#001000";
42
- };
43
- readonly blue: {
44
- readonly 50: "#E6ECF6";
45
- readonly 100: "#CCD9EC";
46
- readonly 200: "#99B3D9";
47
- readonly 300: "#668CC6";
48
- readonly 400: "#3366B3";
49
- readonly 500: "#0040A0";
50
- readonly 600: "#003380";
51
- readonly 700: "#002660";
52
- readonly 800: "#001A40";
53
- readonly 900: "#000D20";
54
- readonly 950: "#000610";
55
- };
56
- readonly purple: {
57
- readonly 50: "#EDE6F6";
58
- readonly 100: "#DBCCEC";
59
- readonly 200: "#B899D9";
60
- readonly 300: "#9466C6";
61
- readonly 400: "#7133B3";
62
- readonly 500: "#4D00A0";
63
- readonly 600: "#3E0080";
64
- readonly 700: "#2E0060";
65
- readonly 800: "#1F0040";
66
- readonly 900: "#0F0020";
67
- readonly 950: "#080010";
68
- };
69
- readonly red: {
70
- readonly 50: "#FDECEC";
71
- readonly 100: "#FBD8D8";
72
- readonly 200: "#F7B1B1";
73
- readonly 300: "#F28A8A";
74
- readonly 400: "#EE6363";
75
- readonly 500: "#EA3C3C";
76
- readonly 600: "#BB3030";
77
- readonly 700: "#8C2424";
78
- readonly 800: "#5E1818";
79
- readonly 900: "#2F0C0C";
80
- readonly 950: "#170606";
81
- };
82
- readonly orange: {
83
- readonly 50: "#FFF1E8";
84
- readonly 100: "#FFE4D0";
85
- readonly 200: "#FFC8A1";
86
- readonly 300: "#FFAD73";
87
- readonly 400: "#FF9144";
88
- readonly 500: "#FF7615";
89
- readonly 600: "#CC5E11";
90
- readonly 700: "#99470D";
91
- readonly 800: "#662F08";
92
- readonly 900: "#331804";
93
- readonly 950: "#190C02";
94
- };
95
- readonly yellow: {
96
- readonly 50: "#FFF8E8";
97
- readonly 100: "#FFF2D0";
98
- readonly 200: "#FFE5A1";
99
- readonly 300: "#FFD773";
100
- readonly 400: "#FFCA44";
101
- readonly 500: "#FFBD15";
102
- readonly 600: "#CC9711";
103
- readonly 700: "#99710D";
104
- readonly 800: "#664C08";
105
- readonly 900: "#332604";
106
- readonly 950: "#191302";
107
- };
108
- readonly cyan: {
109
- readonly 50: "#E8FFFC";
110
- readonly 100: "#D0FFFA";
111
- readonly 200: "#A1FFF4";
112
- readonly 300: "#73FFEF";
113
- readonly 400: "#44FFE9";
114
- readonly 500: "#15FFE4";
115
- readonly 600: "#11CCB6";
116
- readonly 700: "#0D9989";
117
- readonly 800: "#08665B";
118
- readonly 900: "#04332E";
119
- readonly 950: "#021917";
120
- };
121
- };
122
- export type Colors = typeof colors;
123
- export type ColorFamilyName = keyof Colors;
124
- export type ColorShade = keyof typeof colorShadeOpacity;
125
- export type ColorFamily<Name extends ColorFamilyName = ColorFamilyName> = Colors[Name];
126
- export declare const colorCssVariables: Record<string, string>;
127
- export declare const colorCssVars: {
128
- readonly neutral: {
129
- readonly 25: "var(--color-neutral-25)";
130
- readonly 50: "var(--color-neutral-50)";
131
- readonly 100: "var(--color-neutral-100)";
132
- readonly 200: "var(--color-neutral-200)";
133
- readonly 300: "var(--color-neutral-300)";
134
- readonly 400: "var(--color-neutral-400)";
135
- readonly 500: "var(--color-neutral-500)";
136
- readonly 600: "var(--color-neutral-600)";
137
- readonly 700: "var(--color-neutral-700)";
138
- readonly 800: "var(--color-neutral-800)";
139
- readonly 900: "var(--color-neutral-900)";
140
- readonly 950: "var(--color-neutral-950)";
141
- };
142
- readonly green: {
143
- readonly 50: "var(--color-green-50)";
144
- readonly 100: "var(--color-green-100)";
145
- readonly 200: "var(--color-green-200)";
146
- readonly 300: "var(--color-green-300)";
147
- readonly 400: "var(--color-green-400)";
148
- readonly 500: "var(--color-green-500)";
149
- readonly 600: "var(--color-green-600)";
150
- readonly 700: "var(--color-green-700)";
151
- readonly 800: "var(--color-green-800)";
152
- readonly 900: "var(--color-green-900)";
153
- readonly 950: "var(--color-green-950)";
154
- };
155
- readonly blue: {
156
- readonly 50: "var(--color-blue-50)";
157
- readonly 100: "var(--color-blue-100)";
158
- readonly 200: "var(--color-blue-200)";
159
- readonly 300: "var(--color-blue-300)";
160
- readonly 400: "var(--color-blue-400)";
161
- readonly 500: "var(--color-blue-500)";
162
- readonly 600: "var(--color-blue-600)";
163
- readonly 700: "var(--color-blue-700)";
164
- readonly 800: "var(--color-blue-800)";
165
- readonly 900: "var(--color-blue-900)";
166
- readonly 950: "var(--color-blue-950)";
167
- };
168
- readonly purple: {
169
- readonly 50: "var(--color-purple-50)";
170
- readonly 100: "var(--color-purple-100)";
171
- readonly 200: "var(--color-purple-200)";
172
- readonly 300: "var(--color-purple-300)";
173
- readonly 400: "var(--color-purple-400)";
174
- readonly 500: "var(--color-purple-500)";
175
- readonly 600: "var(--color-purple-600)";
176
- readonly 700: "var(--color-purple-700)";
177
- readonly 800: "var(--color-purple-800)";
178
- readonly 900: "var(--color-purple-900)";
179
- readonly 950: "var(--color-purple-950)";
180
- };
181
- readonly red: {
182
- readonly 50: "var(--color-red-50)";
183
- readonly 100: "var(--color-red-100)";
184
- readonly 200: "var(--color-red-200)";
185
- readonly 300: "var(--color-red-300)";
186
- readonly 400: "var(--color-red-400)";
187
- readonly 500: "var(--color-red-500)";
188
- readonly 600: "var(--color-red-600)";
189
- readonly 700: "var(--color-red-700)";
190
- readonly 800: "var(--color-red-800)";
191
- readonly 900: "var(--color-red-900)";
192
- readonly 950: "var(--color-red-950)";
193
- };
194
- readonly orange: {
195
- readonly 50: "var(--color-orange-50)";
196
- readonly 100: "var(--color-orange-100)";
197
- readonly 200: "var(--color-orange-200)";
198
- readonly 300: "var(--color-orange-300)";
199
- readonly 400: "var(--color-orange-400)";
200
- readonly 500: "var(--color-orange-500)";
201
- readonly 600: "var(--color-orange-600)";
202
- readonly 700: "var(--color-orange-700)";
203
- readonly 800: "var(--color-orange-800)";
204
- readonly 900: "var(--color-orange-900)";
205
- readonly 950: "var(--color-orange-950)";
206
- };
207
- readonly yellow: {
208
- readonly 50: "var(--color-yellow-50)";
209
- readonly 100: "var(--color-yellow-100)";
210
- readonly 200: "var(--color-yellow-200)";
211
- readonly 300: "var(--color-yellow-300)";
212
- readonly 400: "var(--color-yellow-400)";
213
- readonly 500: "var(--color-yellow-500)";
214
- readonly 600: "var(--color-yellow-600)";
215
- readonly 700: "var(--color-yellow-700)";
216
- readonly 800: "var(--color-yellow-800)";
217
- readonly 900: "var(--color-yellow-900)";
218
- readonly 950: "var(--color-yellow-950)";
219
- };
220
- readonly cyan: {
221
- readonly 50: "var(--color-cyan-50)";
222
- readonly 100: "var(--color-cyan-100)";
223
- readonly 200: "var(--color-cyan-200)";
224
- readonly 300: "var(--color-cyan-300)";
225
- readonly 400: "var(--color-cyan-400)";
226
- readonly 500: "var(--color-cyan-500)";
227
- readonly 600: "var(--color-cyan-600)";
228
- readonly 700: "var(--color-cyan-700)";
229
- readonly 800: "var(--color-cyan-800)";
230
- readonly 900: "var(--color-cyan-900)";
231
- readonly 950: "var(--color-cyan-950)";
232
- };
233
- };
234
- export type ColorCssVars = typeof colorCssVars;
package/dist/tokens/primitives/typography.d.ts DELETED
@@ -1,32 +0,0 @@
1
- export declare const fontFamily: {
2
- readonly sans: "var(--default-font-family)";
3
- };
4
- export declare const fontWeight: {
5
- readonly regular: 400;
6
- readonly semibold: 600;
7
- };
8
- export declare const fontSize: {
9
- readonly xs: "12px";
10
- readonly sm: "14px";
11
- readonly md: "16px";
12
- readonly lg: "20px";
13
- readonly xl: "24px";
14
- readonly '2xl': "32px";
15
- readonly '3xl': "40px";
16
- readonly '4xl': "48px";
17
- readonly '5xl': "60px";
18
- };
19
- export declare const lineHeight: {
20
- readonly 16: "16px";
21
- readonly 20: "20px";
22
- readonly 24: "24px";
23
- readonly 28: "28px";
24
- readonly 40: "40px";
25
- readonly 48: "48px";
26
- readonly 56: "56px";
27
- readonly 72: "72px";
28
- };
29
- export type FontFamily = (typeof fontFamily)[keyof typeof fontFamily];
30
- export type FontWeight = (typeof fontWeight)[keyof typeof fontWeight];
31
- export type FontSize = (typeof fontSize)[keyof typeof fontSize];
32
- export type LineHeight = (typeof lineHeight)[keyof typeof lineHeight];
package/dist/tokens/semantic/colors.d.ts DELETED
@@ -1,201 +0,0 @@
1
- export declare const semanticColors: {
2
- readonly primary: "#008149";
3
- readonly 'primary-hover': "#006137";
4
- readonly outline: "#F0F5FB";
5
- readonly error: "#BB3030";
6
- readonly 'error-hover': "#8C2424";
7
- };
8
- export declare const semanticColorCssVariables: Record<string, string>;
9
- export declare const button: {
10
- readonly primary: {
11
- readonly default: {
12
- readonly background: "#008149";
13
- readonly border: "#008149";
14
- };
15
- readonly hover: {
16
- readonly background: "#006137";
17
- readonly border: "#006137";
18
- };
19
- readonly focus: {
20
- readonly background: "#008149";
21
- readonly border: "#008149";
22
- };
23
- readonly disabled: {
24
- readonly background: "#E5EAF1";
25
- readonly border: "#848A98";
26
- readonly text: "#848A98";
27
- };
28
- };
29
- readonly outline: {
30
- readonly default: {
31
- readonly background: "#F0F5FB";
32
- readonly border: "#008149";
33
- };
34
- readonly hover: {
35
- readonly background: "#F0F5FB";
36
- readonly border: "#006137";
37
- };
38
- readonly focus: {
39
- readonly background: "#F0F5FB";
40
- readonly border: "#008149";
41
- };
42
- readonly disabled: {
43
- readonly background: "#E5EAF1";
44
- readonly border: "#848A98";
45
- readonly text: "#848A98";
46
- };
47
- };
48
- readonly transparent: {
49
- readonly default: {
50
- readonly background: "transparent";
51
- readonly border: "transparent";
52
- readonly text: "#008149";
53
- };
54
- readonly hover: {
55
- readonly background: "transparent";
56
- readonly border: "transparent";
57
- readonly text: "#006137";
58
- };
59
- readonly focus: {
60
- readonly background: "transparent";
61
- readonly border: "transparent";
62
- readonly text: "#008149";
63
- };
64
- readonly disabled: {
65
- readonly background: "transparent";
66
- readonly border: "transparent";
67
- readonly text: "#848A98";
68
- };
69
- };
70
- readonly error: {
71
- readonly default: {
72
- readonly background: "#BB3030";
73
- readonly border: "#BB3030";
74
- };
75
- readonly hover: {
76
- readonly background: "#8C2424";
77
- readonly border: "#8C2424";
78
- };
79
- readonly focus: {
80
- readonly background: "#BB3030";
81
- readonly border: "#BB3030";
82
- };
83
- readonly disabled: {
84
- readonly background: "#E5EAF1";
85
- readonly border: "#848A98";
86
- readonly text: "#848A98";
87
- };
88
- };
89
- readonly 'outline-error': {
90
- readonly default: {
91
- readonly background: "#F0F5FB";
92
- readonly border: "#BB3030";
93
- readonly text: "#BB3030";
94
- };
95
- readonly hover: {
96
- readonly background: "#F0F5FB";
97
- readonly border: "#8C2424";
98
- readonly text: "#8C2424";
99
- };
100
- readonly focus: {
101
- readonly background: "#F0F5FB";
102
- readonly border: "#BB3030";
103
- readonly text: "#BB3030";
104
- };
105
- readonly disabled: {
106
- readonly background: "#E5EAF1";
107
- readonly border: "#848A98";
108
- readonly text: "#848A98";
109
- };
110
- };
111
- readonly 'transparent-error': {
112
- readonly default: {
113
- readonly background: "transparent";
114
- readonly border: "transparent";
115
- readonly text: "#BB3030";
116
- };
117
- readonly hover: {
118
- readonly background: "transparent";
119
- readonly border: "transparent";
120
- readonly text: "#8C2424";
121
- };
122
- readonly focus: {
123
- readonly background: "transparent";
124
- readonly border: "transparent";
125
- readonly text: "#BB3030";
126
- };
127
- readonly disabled: {
128
- readonly background: "transparent";
129
- readonly border: "transparent";
130
- readonly text: "#848A98";
131
- };
132
- };
133
- readonly neutral: {
134
- readonly default: {
135
- readonly background: "#F0F5FB";
136
- readonly border: "#C5CAD3";
137
- readonly text: "#35373D";
138
- };
139
- readonly hover: {
140
- readonly background: "#E5EAF1";
141
- readonly border: "#AFB5C0";
142
- readonly text: "#35373D";
143
- };
144
- readonly focus: {
145
- readonly background: "#F0F5FB";
146
- readonly border: "#C5CAD3";
147
- readonly text: "#35373D";
148
- };
149
- readonly disabled: {
150
- readonly background: "#E5EAF1";
151
- readonly border: "#848A98";
152
- readonly text: "#848A98";
153
- };
154
- };
155
- readonly 'outline-neutral': {
156
- readonly default: {
157
- readonly background: "#F0F5FB";
158
- readonly border: "#C5CAD3";
159
- readonly text: "#35373D";
160
- };
161
- readonly hover: {
162
- readonly background: "#F0F5FB";
163
- readonly border: "#AFB5C0";
164
- readonly text: "#35373D";
165
- };
166
- readonly focus: {
167
- readonly background: "#F0F5FB";
168
- readonly border: "#C5CAD3";
169
- readonly text: "#35373D";
170
- };
171
- readonly disabled: {
172
- readonly background: "#E5EAF1";
173
- readonly border: "#848A98";
174
- readonly text: "#848A98";
175
- };
176
- };
177
- readonly 'transparent-neutral': {
178
- readonly default: {
179
- readonly background: "transparent";
180
- readonly border: "transparent";
181
- readonly text: "#35373D";
182
- };
183
- readonly hover: {
184
- readonly background: "transparent";
185
- readonly border: "transparent";
186
- readonly text: "#1A1C1E";
187
- };
188
- readonly focus: {
189
- readonly background: "transparent";
190
- readonly border: "transparent";
191
- readonly text: "#35373D";
192
- };
193
- readonly disabled: {
194
- readonly background: "transparent";
195
- readonly border: "transparent";
196
- readonly text: "#848A98";
197
- };
198
- };
199
- };
200
- export type SemanticColors = typeof semanticColors;
201
- export type ButtonTokens = typeof button;
package/dist/tokens/semantic/typography.d.ts DELETED
@@ -1,100 +0,0 @@
1
- export declare const typography: {
2
- readonly 'heading-h1': {
3
- readonly fontSize: "60px";
4
- readonly lineHeight: "72px";
5
- readonly fontWeight: 600;
6
- readonly fontFamily: "var(--default-font-family)";
7
- };
8
- readonly 'heading-h2': {
9
- readonly fontSize: "48px";
10
- readonly lineHeight: "56px";
11
- readonly fontWeight: 600;
12
- readonly fontFamily: "var(--default-font-family)";
13
- };
14
- readonly 'heading-h3': {
15
- readonly fontSize: "40px";
16
- readonly lineHeight: "48px";
17
- readonly fontWeight: 600;
18
- readonly fontFamily: "var(--default-font-family)";
19
- };
20
- readonly 'heading-h4': {
21
- readonly fontSize: "32px";
22
- readonly lineHeight: "40px";
23
- readonly fontWeight: 600;
24
- readonly fontFamily: "var(--default-font-family)";
25
- };
26
- readonly 'heading-h5': {
27
- readonly fontSize: "24px";
28
- readonly lineHeight: "28px";
29
- readonly fontWeight: 600;
30
- readonly fontFamily: "var(--default-font-family)";
31
- };
32
- readonly 'heading-h6': {
33
- readonly fontSize: "20px";
34
- readonly lineHeight: "24px";
35
- readonly fontWeight: 600;
36
- readonly fontFamily: "var(--default-font-family)";
37
- };
38
- readonly 'body-sm': {
39
- readonly fontSize: "14px";
40
- readonly lineHeight: "16px";
41
- readonly fontFamily: "var(--default-font-family)";
42
- readonly fontWeight: 400;
43
- };
44
- readonly 'body-sm-semibold': {
45
- readonly fontWeight: 600;
46
- readonly fontSize: "14px";
47
- readonly lineHeight: "16px";
48
- readonly fontFamily: "var(--default-font-family)";
49
- };
50
- readonly 'body-sm-link': {
51
- readonly fontSize: "14px";
52
- readonly lineHeight: "16px";
53
- readonly fontFamily: "var(--default-font-family)";
54
- readonly fontWeight: 400;
55
- };
56
- readonly 'body-md': {
57
- readonly fontSize: "16px";
58
- readonly lineHeight: "20px";
59
- readonly fontFamily: "var(--default-font-family)";
60
- readonly fontWeight: 400;
61
- };
62
- readonly 'body-md-link': {
63
- readonly fontSize: "16px";
64
- readonly lineHeight: "20px";
65
- readonly fontFamily: "var(--default-font-family)";
66
- readonly fontWeight: 400;
67
- };
68
- readonly 'body-md-semibold': {
69
- readonly fontWeight: 600;
70
- readonly fontSize: "16px";
71
- readonly lineHeight: "20px";
72
- readonly fontFamily: "var(--default-font-family)";
73
- };
74
- readonly 'body-lg': {
75
- readonly fontSize: "20px";
76
- readonly lineHeight: "24px";
77
- readonly fontFamily: "var(--default-font-family)";
78
- readonly fontWeight: 400;
79
- };
80
- readonly 'body-lg-link': {
81
- readonly fontSize: "20px";
82
- readonly lineHeight: "24px";
83
- readonly fontFamily: "var(--default-font-family)";
84
- readonly fontWeight: 400;
85
- };
86
- readonly 'body-lg-semibold': {
87
- readonly fontWeight: 600;
88
- readonly fontSize: "20px";
89
- readonly lineHeight: "24px";
90
- readonly fontFamily: "var(--default-font-family)";
91
- };
92
- readonly caption: {
93
- readonly fontSize: "12px";
94
- readonly lineHeight: "16px";
95
- readonly fontFamily: "var(--default-font-family)";
96
- readonly fontWeight: 400;
97
- };
98
- };
99
- export type TypographyTokenName = keyof typeof typography;
100
- export type TypographyToken = (typeof typography)[TypographyTokenName];