@warp-ds/css 1.0.0-alpha.9 → 1.0.0

package/README.md

@@ -9,13 +9,11 @@ The package includes resets, component classes and tokens.
 The CSS files should be used directly from Eik. This is because we can alias releases by major versions.
 
 
-We publish 2 versions of resets. The minified that can be used in production and non-minified that can be used in development.
+We publish 3 css files.
 
-```html
-<link href="https://assets.finn.no/pkg/@warp-ds/css/v1/resets.min.css" rel="stylesheet" />
-or
-<link href="https://assets.finn.no/pkg/@warp-ds/css/v1/resets.css" rel="stylesheet" />
-```
+- Resets <link href="https://assets.finn.no/pkg/@warp-ds/css/[VERSION]/resets.css" rel="stylesheet" />
+- Components css <link href="https://assets.finn.no/pkg/@warp-ds/css/[VERSION]/components.css" rel="stylesheet" />
+- Brand css with tokens <link href="https://assets.finn.no/pkg/@warp-ds/css/[VERSION]/tokens/[BRANDNAME e.g. tori-fi].css" rel="stylesheet" />  
 
 ## Usage (npm)
 

package/component-classes/classes.js

@@ -1,8 +1,8 @@
 import * as components from './index.js';
 
 export const classes = Object.values(components)
-    .map((e) => {
-        if (typeof e === 'object') return Object.values(e).map((e) => e.split(/\s/));
-        return e.split(/\s/);
-    })
-    .flat(Infinity);
+  .map((e) => {
+    if (typeof e === 'object') return Object.values(e).map((e) => e.split(/\s/));
+    return e.split(/\s/);
+  })
+  .flat(Infinity);

package/component-classes/index.d.ts

@@ -19,7 +19,6 @@ export namespace pageIndicator {
     const dot: string;
     const inactive: string;
     const active: string;
-    const hover: string;
 }
 export namespace ribbon {
     const base_1: string;
@@ -349,6 +348,7 @@ export namespace breadcrumbs {
     export { a11y_4 as a11y };
 }
 export namespace toggle {
+    export const field: string;
     const wrapper_10: string;
     export { wrapper_10 as wrapper };
     export const deadToggleWrapper: string;
@@ -386,10 +386,11 @@ export namespace toggle {
     export { a11y_5 as a11y };
 }
 export namespace clickable {
-    export const clickable: string;
-    export const clickableNotToggle: string;
+    export const toggle: string;
     const label_6: string;
     export { label_6 as label };
+    export const buttonOrLink: string;
+    export const buttonOrLinkStretch: string;
 }
 export namespace combobox {
     const wrapper_11: string;

package/component-classes/index.js

@@ -21,9 +21,8 @@ export const attention = {
 export const pageIndicator = {
   wrapper: 'flex space-x-8 p-8',
   dot: 'h-8 w-8 rounded-full',
-  inactive: 'i-bg-$color-pageindicator-background',
-  active: 'i-bg-$color-pageindicator-background-active',
-  hover: 'i-bg-$color-pageindicator-background-hover',
+  inactive: 'i-bg-$color-pageindicator-background hover:i-bg-$color-pageindicator-background-hover',
+  active: 'i-bg-$color-pageindicator-background-selected',
 };
 
 export const ribbon = {
@@ -65,7 +64,7 @@ export const box = {
   bordered: 'border-2 i-border-$color-box-bordered-border i-bg-$color-box-bordered-background i-text-$color-box-bordered-text',
   infoClickable: 'hover:i-bg-$color-box-info-background-hover active:i-bg-$color-box-info-background-hover',
   neutralClickable: 'hover:i-bg-$color-box-neutral-background-hover active:i-bg-$color-box-neutral-background-hover',
-  borderedClickable: 'hover:i-bg-$color-box-bordered-background-hover active:i-bg-$color-box-bordered-background-hover hover:i-border-$color-box-bordered-border-hover active:i-border-$color-box-bordered-border-hover'
+  borderedClickable: 'hover:i-bg-$color-box-bordered-background-hover active:i-bg-$color-box-bordered-background-hover hover:i-border-$color-box-bordered-border-hover active:i-border-$color-box-bordered-border-hover',
 };
 
 export const pill = {
@@ -111,7 +110,7 @@ export const step = {
 export const steps = {
   steps: 'w-full',
   stepsHorizontal: 'flex',
-}
+};
 
 export const card = {
   card: 'cursor-pointer overflow-hidden relative transition-all',
@@ -120,13 +119,13 @@ export const card = {
   cardFlatUnselected:
     'i-bg-$color-card-flat-background i-border-$color-card-flat-border hover:i-bg-$color-card-flat-background-hover hover:i-border-$color-card-flat-border-hover active:i-bg-$color-card-flat-background-active active:i-border-$color-card-flat-border-active',
   cardFlatSelected:
-    'i-border-$color-card-flat-border-active i-bg-$color-card-flat-background-active hover:i-bg-$color-card-flat-background-active-hover hover:i-border-$color-card-flat-border-active-hover active:i-border-$color-card-flat-border-active active:i-bg-$color-card-flat-background-active',
+    'i-border-$color-card-flat-border-selected i-bg-$color-card-flat-background-selected hover:i-bg-$color-card-flat-background-selected-hover hover:i-border-$color-card-flat-border-selected-hover active:i-border-$color-card-flat-border-active active:i-bg-$color-card-flat-background-active',
   cardSelected:
-    'i-border-$color-card-border-active i-bg-$color-card-background-active hover:i-border-$color-card-border-active-hover hover:i-bg-$color-card-background-active-hover active:i-border-$color-card-border-active',
+    'i-border-$color-card-border-selected i-bg-$color-card-background-selected hover:i-border-$color-card-border-selected-hover hover:i-bg-$color-card-background-selected-hover active:i-border-$color-card-border-selected-active',
   cardOutline:
     'active:i-border-$color-card-flat-border absolute rounded-8 inset-0 transition-all border-2',
   cardOutlineUnselected: 'i-border-$color-card-border',
-  cardOutlineSelected: 'i-border-$color-card-border-active hover:i-border-$color-card-border-active-hover',
+  cardOutlineSelected: 'i-border-$color-card-border-selected hover:i-border-$color-card-border-selected-hover',
   a11y: 'sr-only',
 };
 
@@ -135,12 +134,12 @@ export const switchToggle = {
   label: 'block relative h-24 w-44 cursor-pointer group',
   labelDisabled: 'pointer-events-none',
   track: 'absolute top-0 left-0 h-full w-full rounded-full transition-colors',
-  trackActive: 'i-bg-$color-switch-track-background-active group-hover:i-bg-$color-switch-track-background-active-hover',
+  trackActive: 'i-bg-$color-switch-track-background-selected group-hover:i-bg-$color-switch-track-background-selected-hover',
   trackInactive: 'i-bg-$color-switch-track-background group-hover:i-bg-$color-switch-track-background-hover',
   trackDisabled: 'i-bg-$color-switch-track-background-disabled',
   handle: 'absolute transform-gpu h-16 w-16 top-4 left-4 rounded-full transition-transform',
   handleSelected: 'translate-x-20',
-  handleNotDisabled: 'i-bg-$color-switch-handle-background shadow-s',
+  handleNotDisabled: 'i-bg-$color-switch-handle-background i-shadow-$shadow-switch-handle',
   handleDisabled: 'i-bg-$color-switch-handle-background-disabled',
   a11y: 'sr-only',
 };
@@ -166,25 +165,25 @@ export const toast = {
   iconNegative: 'i-text-$color-toast-negative-icon',
   iconLoading: 'animate-bounce',
   content: 'self-center mr-8 py-4 last-child:mb-0',
-  close: 'bg-transparent ml-auto p-[8px]',
+  close: 'bg-transparent ml-auto p-[8px] i-text-$color-toast-close-icon hover:i-text-$color-toast-close-icon-hover active:i-text-$color-toast-close-icon-active',
 };
 
 export const tabs = {
   tabContainer: 'mx-auto max-w-screen-md w-full grid relative',
   wunderbar:
-    'absolute i-border-$color-tabs-border-active -bottom-0 border-b-4 transition-all',
+    'absolute i-border-$color-tabs-border-selected -bottom-0 border-b-4 transition-all',
   wrapperUnderlined:
     'border-b i-border-$color-tabs-border -mx-16 sm:mx-0 px-4 sm:px-0 mb-32 ',
 };
 
 export const tab = {
-  tab: 'grid items-center font-bold gap-8 focusable antialias p-16 pb-8 border-b-4 i-text-$color-tabs-text i-border-$color-tabs-border hover:i-text-$color-tabs-text-hover hover:i-border-$color-tabs-border-hover',
-  tabActive: 'i-text-$color-tabs-text-active',
+  tab: 'grid items-center font-bold gap-8 focusable antialias p-16 pb-8 border-b-4 bg-transparent i-text-$color-tabs-text i-border-$color-tabs-border hover:i-text-$color-tabs-text-hover hover:i-border-$color-tabs-border-hover',
+  tabActive: 'i-text-$color-tabs-text-selected',
   icon: 'mx-auto hover:i-text-$color-tabs-text-hover',
-  iconUnderlinedActive: 'i-text-$color-tabs-text-active',
+  iconUnderlinedActive: 'i-text-$color-tabs-text-selected',
   content: 'flex items-center justify-center gap-8',
   contentUnderlined: 'content-underlined', // content-underlined is a no-op that prevents a quirk in how Vue handles class bindings
-  contentUnderlinedActive: 'i-text-$color-tabs-text-active',
+  contentUnderlinedActive: 'i-text-$color-tabs-text-selected',
 };
 
 // Todo: Handle dynamic classnames
@@ -215,7 +214,7 @@ export const expandable = {
   expansion: 'overflow-hidden',
   expansionNotExpanded: 'h-0 invisible',
   button: buttonReset + ' hover:underline focus:underline',
-  buttonBox: 'w-full text-left relative inline-flex! items-center ' + box.box,
+  buttonBox: 'w-full text-left relative inline-flex items-center ' + box.box,
   paddingTop: 'pt-0',
   title: 'flex justify-between items-center',
   titleType: 'h4',
@@ -224,25 +223,25 @@ export const expandable = {
 export const button = {
   // Buttontypes
   buttonSecondary:
-    'py-10 px-14 border-2 font-bold rounded-8 leading-[24] max-w-max focusable justify-center transition-colors ease-in-out i-text-$color-button-secondary-text hover:i-text-$color-button-secondary-text i-border-$color-button-secondary-border i-bg-$color-button-secondary-background hover:i-bg-$color-button-secondary-background-hover hover:i-border-$color-button-secondary-border-hover active:i-bg-$color-button-secondary-background-active', // .button, .button--secondary, .button--default. using tailwind ease-in-out instead of fabric transition-timing-function: cubic-bezier(0.46, 0.03, 0.52, 0.96)
+    'py-10 px-14 border-2 font-bold rounded-8 text-m leading-[24] max-w-max focusable justify-center transition-colors ease-in-out i-text-$color-button-secondary-text hover:i-text-$color-button-secondary-text i-border-$color-button-secondary-border i-bg-$color-button-secondary-background hover:i-bg-$color-button-secondary-background-hover hover:i-border-$color-button-secondary-border-hover active:i-bg-$color-button-secondary-background-active', // .button, .button--secondary, .button--default. using tailwind ease-in-out instead of fabric transition-timing-function: cubic-bezier(0.46, 0.03, 0.52, 0.96)
   buttonPrimary:
-    'py-12 px-16 border-0 font-bold rounded-8 leading-[24] max-w-max focusable justify-center transition-colors ease-in-out i-text-$color-button-primary-text hover:i-text-$color-button-primary-text i-bg-$color-button-primary-background hover:i-bg-$color-button-primary-background-hover! active:i-bg-$color-button-primary-background-active', // .button--primary, .button--cta
+    'py-12 px-16 border-0 font-bold rounded-8 text-m leading-[24] max-w-max focusable justify-center transition-colors ease-in-out i-text-$color-button-primary-text hover:i-text-$color-button-primary-text i-bg-$color-button-primary-background hover:i-bg-$color-button-primary-background-hover! active:i-bg-$color-button-primary-background-active', // .button--primary, .button--cta
   buttonFlat:
-    'py-12 px-16 border-0! font-bold rounded-8 leading-[24] max-w-max focusable justify-center transition-colors ease-in-out i-bg-$color-button-quiet-background! i-text-$color-button-quiet-text! hover:i-bg-$color-button-quiet-background-hover! active:i-bg-$color-button-quiet-background-active!', // .button--quiet, .button--flat
+    'py-12 px-16 border-0! font-bold rounded-8 text-m leading-[24] max-w-max focusable justify-center transition-colors ease-in-out i-bg-$color-button-quiet-background! i-text-$color-button-quiet-text! hover:i-bg-$color-button-quiet-background-hover! active:i-bg-$color-button-quiet-background-active!', // .button--quiet, .button--flat
   buttonDestructive:
-    'py-12 px-16 border-0 font-bold rounded-8 leading-[24] max-w-max focusable justify-center transition-colors ease-in-out i-bg-$color-button-negative-background i-text-$color-button-negative-text hover:i-text-$color-button-negative-text hover:i-bg-$color-button-negative-background-hover! active:i-bg-$color-button-negative-background-active!', // .button--destructive
+    'py-12 px-16 border-0 font-bold rounded-8 text-m leading-[24] max-w-max focusable justify-center transition-colors ease-in-out i-bg-$color-button-negative-background i-text-$color-button-negative-text hover:i-text-$color-button-negative-text hover:i-bg-$color-button-negative-background-hover! active:i-bg-$color-button-negative-background-active!', // .button--destructive
   buttonDestructiveFlat:
-    'py-12 px-16 border-0 font-bold rounded-8 leading-[24] max-w-max focusable justify-center transition-colors ease-in-out i-bg-$color-button-negative-quiet-background! i-text-$color-button-negative-quiet-text! hover:i-bg-$color-button-negative-quiet-background-hover! active:i-bg-$color-button-negative-quiet-background-active!', // .button--destructive-flat
+    'py-12 px-16 border-0 font-bold rounded-8 text-m leading-[24] max-w-max focusable justify-center transition-colors ease-in-out i-bg-$color-button-negative-quiet-background! i-text-$color-button-negative-quiet-text! hover:i-bg-$color-button-negative-quiet-background-hover! active:i-bg-$color-button-negative-quiet-background-active!', // .button--destructive-flat
   buttonUtility:
-    'px-[15px] py-[11px] font-bold leading-[24] max-w-max focusable justify-center transition-colors ease-in-out border rounded-4 i-text-$color-button-utility-text hover:i-text-$color-button-utility-text i-bg-$color-button-utility-background i-border-$color-button-utility-border hover:i-bg-$color-button-utility-background hover:i-border-$color-button-utility-border-hover! active:i-border-$color-button-utility-border-active!', // .button--utility
+    'px-[15px] py-[11px] font-bold text-m leading-[24] max-w-max focusable justify-center transition-colors ease-in-out border rounded-4 i-text-$color-button-utility-text hover:i-text-$color-button-utility-text i-bg-$color-button-utility-background i-border-$color-button-utility-border hover:i-bg-$color-button-utility-background hover:i-border-$color-button-utility-border-hover! active:i-border-$color-button-utility-border-active!', // .button--utility
   buttonUtilityFlat:
-    'py-12 px-16 bg-transparent border-0 font-bold leading-[24] max-w-max focusable justify-center transition-colors ease-in-out i-text-$color-button-utility-quiet-text i-bg-$color-button-utility-quiet-background hover:i-bg-$color-button-utility-quiet-background-hover rounded-4', // .button--utility-flat
+    'py-12 px-16 bg-transparent border-0 font-bold text-m leading-[24] max-w-max focusable justify-center transition-colors ease-in-out i-text-$color-button-utility-quiet-text i-bg-$color-button-utility-quiet-background hover:i-bg-$color-button-utility-quiet-background-hover rounded-4', // .button--utility-flat
   buttonPill:
-    'font-bold leading-[24] max-w-max focusable justify-center transition-colors ease-in-out rounded-full! min-h-[44px] min-w-[44px] border-0! p-4 i-text-$color-button-pill-icon hover:i-text-$color-button-pill-icon-hover active:i-text-$color-button-pill-icon-active i-bg-$color-button-pill-background hover:i-bg-$color-button-pill-background-hover acive:i-bg-$color-button-pill-background-active inline-flex items-center justify-center hover:bg-clip-padding', // .button--pill   missing:  hover:background-color: rgba(var(--f-blue-600-rgb), 0.1) , and:  hover:border-color: hsla(0, 0%, 100%, 0.4);
+    'font-bold text-m leading-[24] max-w-max focusable justify-center transition-colors ease-in-out rounded-full! min-h-[44px] min-w-[44px] border-0! p-4 i-text-$color-button-pill-icon hover:i-text-$color-button-pill-icon-hover active:i-text-$color-button-pill-icon-active i-bg-$color-button-pill-background hover:i-bg-$color-button-pill-background-hover active:i-bg-$color-button-pill-background-active inline-flex items-center justify-center hover:bg-clip-padding', // .button--pill
   buttonLink:
-    'leading-[24] max-w-max focusable ease-in-out inline s-text-link active:underline hover:underline', //.button--link /* Buttons pretending to be links, (Should rather inherit the actual link setup in the future?)  */
-  // Sizestuff
-  buttonSmall: 'px-16 py-6 text-xs leading-xs', // .button--small
+    'leading-[24] max-w-max bg-transparent focusable ease-in-out inline i-text-$color-button-link-text active:underline hover:underline', //.button--link /* Buttons pretending to be links, (Should rather inherit the actual link setup in the future?)  */
+  // Size stuff
+  buttonSmall: 'px-16 py-6 text-xs!', // .button--small
   buttonSmallOverride: 'py-8', // .button--small.button--primary, .button--small.button--destructive, .button--small.button--destructive-flat, .button--small.button--order, .button--small.button--quiet
   buttonSmallSecondary: 'py-6', // .button--small.button--secondary
   buttonSmallUtility: 'py-7 px-15', // .button--small.button--secondary
@@ -264,18 +263,18 @@ export const buttonGroup = {
   vertical: 'flex-col',
   nonOutlinedVertical: 'divide-y',
   nonOutlinedHorizontal: 'divide-x',
-}
+};
 
 export const buttonGroupItem = {
-  wrapper: 'relative i-text-$color-buttongroup-utility-text i-bg-$color-buttongroup-utility-background hover:i-bg-$color-buttongroup-utility-background-hover active:i-text-$color-buttongroup-utility-text-active active:i-bg-$color-buttongroup-utility-background-active',
-  outlined: 'border hover:z-30 i-border-$color-buttongroup-utility-border active:i-border-$color-buttongroup-utility-border-active',
+  wrapper: 'relative i-text-$color-buttongroup-utility-text i-bg-$color-buttongroup-utility-background hover:i-bg-$color-buttongroup-utility-background-hover active:i-text-$color-buttongroup-utility-text-selected active:i-bg-$color-buttongroup-utility-background-selected',
+  outlined: 'border hover:z-30 i-border-$color-buttongroup-utility-border active:i-border-$color-buttongroup-utility-border-selected',
   outlinedVertical: '-mb-1 last:mb-0 first:rounded-lt-4 first:rounded-rt-4 last:rounded-lb-4 last:rounded-rb-4',
   outlinedHorizontal: '-mr-1 last:mr-0 first:rounded-lt-4 first:rounded-lb-4 last:rounded-rt-4 last:rounded-rb-4',
   outlinedVerticalResets: 'px-1 pt-1 last:pb-1 -mb-1 last:mb-0',
   outlinedHorizontalResets: 'py-1 pl-1 last:pr-1 -mr-1 last:mr-0',
-  outlinedSelected: 'i-border-$color-buttongroup-utility-border-active',
-  selected: 'z-30 i-text-$color-buttongroup-utility-text-active! i-bg-$color-buttongroup-utility-background-active!',
-}
+  outlinedSelected: 'i-border-$color-buttongroup-utility-border-selected',
+  selected: 'z-30 i-text-$color-buttongroup-utility-text-selected! i-bg-$color-buttongroup-utility-background-selected!',
+};
 
 export const modal = {
   //TODO: this class can be removed when we have the solution for opacity and we can add rgba values to the background of the backdrop
@@ -313,20 +312,20 @@ export const alert = {
   warning:  "i-border-$color-alert-warning-subtle-border i-bg-$color-alert-warning-background i-text-$color-alert-warning-text i-border-l-$color-alert-warning-border",
   warningIcon: "i-text-$color-alert-warning-icon",
   info:  "i-border-$color-alert-info-subtle-border i-bg-$color-alert-info-background i-text-$color-alert-info-text i-border-l-$color-alert-info-border",
-  infoIcon: "i-text-$color-alert-info-icon"
-}
+  infoIcon: "i-text-$color-alert-info-icon",
+};
 
 export const input = {
   default: 'block text-m mb-0 leading-m i-text-$color-input-text-filled i-bg-$color-input-background i-border-$color-input-border hover:i-border-$color-input-border-hover active:i-border-$color-input-border-active rounded-4 py-12 px-8 block border-1 w-full focusable focus:[--w-outline-offset:-2px] caret-current',
   textArea: 'min-h-[42] sm:min-h-[45]',
   disabled: 'i-bg-$color-input-background-disabled i-border-$color-input-border-disabled hover:i-border-$color-input-border-disabled! i-text-$color-input-text-disabled pointer-events-none',
-  invalid: 'i-border-$color-input-border-error i-text-$color-input-text-error!',
+  invalid: 'i-border-$color-input-border-negative i-text-$color-input-text-negative!',
   readOnly: 'pl-0 bg-transparent border-0 pointer-events-none i-text-$color-input-text-read-only',
-  placeholder: 'placeholder:s-text-placeholder',
+  placeholder: 'placeholder:i-text-$color-input-text-placeholder',
   wrapper: 'relative',
   suffix: 'pr-40',
-  prefix: 'pl-40'
-}
+  prefix: 'pl-40',
+};
 
 export const select = {
   default: 'block text-m mb-0 leading-m i-text-$color-select-text i-bg-$color-select-background i-border-$color-select-border hover:i-border-$color-select-border-hover active:i-border-$color-select-border-active rounded-4 py-12 px-8 block border-1 w-full focusable focus:[--w-outline-offset:-2px] appearance-none pr-32 cursor-pointer caret-current',
@@ -335,24 +334,24 @@ export const select = {
   readOnly: 'pl-0 bg-transparent border-0 pointer-events-none before:hidden',
   wrapper: 'relative',
   selectWrapper: `relative before:block before:absolute before:right-0 before:bottom-0 before:w-32 before:h-full before:pointer-events-none `,
-  chevron: 'absolute top-[30%] block right-0 bottom-0 w-32 h-full i-text-$color-select-icon',
+  chevron: 'absolute top-[30%] block right-0 bottom-0 w-32 h-full i-text-$color-select-icon pointer-events-none cursor-pointer',
   chevronDisabled: 'opacity-25',
-}
+};
 
 export const label = {
-    label: 'antialiased block relative text-s font-bold pb-4 cursor-pointer i-text-$color-label-text',
-    labelInvalid: 'i-text-$color-label-text-negative',
-    optional: 'pl-8 font-normal text-s i-text-$color-label-optional-text',
-}
+  label: 'antialiased block relative text-s font-bold pb-4 cursor-pointer i-text-$color-label-text',
+  labelInvalid: 'i-text-$color-label-text-negative',
+  optional: 'pl-8 font-normal text-s i-text-$color-label-optional-text',
+};
 
 export const helpText = {
-    helpText: 'text-xs mt-4 block i-text-$color-helptext-text',
-    helpTextValid: 'i-text-$color-helptext-text-positive',
-    helpTextInvalid: 'i-text-$color-helptext-text-negative'
-}
+  helpText: 'text-xs mt-4 block i-text-$color-helptext-text',
+  helpTextValid: 'i-text-$color-helptext-text-positive',
+  helpTextInvalid: 'i-text-$color-helptext-text-negative',
+};
 
 const prefixSuffixWrapperBase =
-  'absolute top-0 bottom-0 flex justify-center items-center focusable focus:[--w-outline-offset:-2px] ';
+  'absolute top-0 bottom-0 flex justify-center items-center focusable focus:[--w-outline-offset:-2px] bg-transparent ';
 
 export const suffix = {
   wrapper: prefixSuffixWrapperBase + 'right-0',
@@ -374,9 +373,10 @@ export const breadcrumbs = {
   link: 'i-text-$color-breadcrumbs-link-text',
   separator: 'select-none i-text-$color-breadcrumbs-icon',
   a11y: 'sr-only',
-}
+};
 
 export const toggle = {
+  field: 'relative text-m',
   wrapper: 'relative py-1',
   deadToggleWrapper: 'h-20 w-20 pointer-events-none',
   input: 'peer',
@@ -387,21 +387,21 @@ export const toggle = {
   label: 'cursor-pointer text-m i-text-$color-label-text py-2 pl-28 select-none relative block before:block before:border before:absolute before:transition-all before:left-0 before:w-20 before:h-20 before:top-2',
   deadToggleLabel: '-mt-2',
   noContent: `before:content-[""]`,
-  indeterminate: `leading-[11] before:s-text-inverted before:text-center before:font-bold before:content-["-"] peer-indeterminate:before:i-border-$color-checkbox-border-active peer-indeterminate:before:i-bg-$color-checkbox-background-active peer-indeterminate:hover:before:i-border-$color-checkbox-border-hover peer-indeterminate:hover:before:i-bg-$color-checkbox-background-active-hover`,
+  indeterminate: `before:flex! before:items-center before:justify-center before:i-text-$color-checkbox-icon before:text-center before:font-bold before:content-["-"] peer-indeterminate:before:i-border-$color-checkbox-border-selected peer-indeterminate:before:i-bg-$color-checkbox-background-selected peer-indeterminate:hover:before:i-border-$color-checkbox-border-hover peer-indeterminate:hover:before:i-bg-$color-checkbox-background-selected-hover`,
   labelDisabled: 'pointer-events-none',
   checkbox: 'before:rounded-2 hover:before:i-border-$color-checkbox-border-hover hover:before:i-bg-$color-checkbox-background-hover',
-  checkboxChecked: 'peer-checked:before:i-border-$color-checkbox-border-active peer-checked:before:i-bg-$color-checkbox-background-active peer-checked:peer-hover:before:i-border-$color-checkbox-border-active-hover peer-checked:peer-hover:before:i-bg-$color-checkbox-background-active-hover',
-  checkboxInvalid: 'before:i-bg-$color-checkbox-negative-background hover:before:i-bg-$color-checkbox-negative-background-hover peer-checked:before:i-border-$color-checkbox-negative-border-active hover:before:i-border-$color-checkbox-negative-border-hover peer-checked:before:i-bg-$color-checkbox-negative-background-active peer-checked:peer-hover:before:i-bg-$color-checkbox-negative-background-active-hover peer-checked:peer-hover:before:i-border-$color-checkbox-negative-border-active-hover',
-  checkboxDisabled: 'before:i-bg-$color-checkbox-background-disabled before:i-border-$color-checkbox-border-disabled peer-checked:before:i-border-$color-checkbox-border-active-disabled peer-checked:before:i-bg-$color-checkbox-background-active-disabled',
+  checkboxChecked: 'peer-checked:before:i-border-$color-checkbox-border-selected peer-checked:before:i-bg-$color-checkbox-background-selected peer-checked:peer-hover:before:i-border-$color-checkbox-border-selected-hover peer-checked:peer-hover:before:i-bg-$color-checkbox-background-selected-hover',
+  checkboxInvalid: 'before:i-bg-$color-checkbox-negative-background hover:before:i-bg-$color-checkbox-negative-background-hover peer-checked:before:i-border-$color-checkbox-negative-border-selected hover:before:i-border-$color-checkbox-negative-border-hover peer-checked:before:i-bg-$color-checkbox-negative-background-selected peer-checked:peer-hover:before:i-bg-$color-checkbox-negative-background-selected-hover peer-checked:peer-hover:before:i-border-$color-checkbox-negative-border-selected-hover',
+  checkboxDisabled: 'before:i-bg-$color-checkbox-background-disabled before:i-border-$color-checkbox-border-disabled peer-checked:before:i-border-$color-checkbox-border-selected-disabled peer-checked:before:i-bg-$color-checkbox-background-selected-disabled',
   labelCheckboxBorder: 'i-border-$color-checkbox-border',
-  radio: 'before:rounded-full peer-checked:before:border-[6] peer-checked:peer-hover:before:i-border-$color-radio-border-active-hover peer-hover:before:i-border-$color-radio-border-hover peer-hover:before:i-bg-$color-radio-background-hover',
-  radioChecked: 'peer-checked:before:i-border-$color-radio-border-active',
-  radioInvalid: 'before:i-bg-$color-radio-negative-background peer-hover:before:i-bg-$color-radio-negative-background-hover before:i-border-$color-radio-negative-border peer-hover:before:i-border-$color-radio-negative-border-hover peer-checked:before:i-border-$color-radio-negative-border-active peer-checked:peer-hover:before:i-border-$color-radio-negative-border-active-hover ',
-  radioDisabled: 'before:i-bg-$color-radio-background-disabled before:i-border-$color-radio-border-disabled peer-checked:before:i-border-$color-radio-border-active-disabled',
+  radio: 'before:rounded-full peer-checked:before:border-[6] peer-checked:peer-hover:before:i-border-$color-radio-border-selected-hover peer-hover:before:i-border-$color-radio-border-hover peer-hover:before:i-bg-$color-radio-background-hover',
+  radioChecked: 'peer-checked:before:i-border-$color-radio-border-selected',
+  radioInvalid: 'before:i-bg-$color-radio-negative-background peer-hover:before:i-bg-$color-radio-negative-background-hover before:i-border-$color-radio-negative-border peer-hover:before:i-border-$color-radio-negative-border-hover peer-checked:before:i-border-$color-radio-negative-border-selected peer-checked:peer-hover:before:i-border-$color-radio-negative-border-selected-hover ',
+  radioDisabled: 'before:i-bg-$color-radio-background-disabled before:i-border-$color-radio-border-disabled peer-checked:before:i-border-$color-radio-border-selected-disabled',
   labelRadioBorder: 'i-border-$color-radio-border',
   radioButtons: 'inline-flex relative font-bold rounded-8',
   radioButtonsGroup: 'group',
-  radioButtonsLabel: 'peer-hover:peer-not-checked:i-bg-$color-buttongroup-primary-background-hover peer-checked:i-text-$color-buttongroup-primary-text-active peer-checked:i-bg-$color-buttongroup-primary-background-active peer-checked:i-border-$color-buttongroup-primary-border-active block relative text-s font-bold cursor-pointer i-text-$color-buttongroup-primary-text text-center s-bg-default border-2 i-border-$color-buttongroup-primary-border py-8 pl-12 pr-14 group-first-of-type:rounded-tl-8 group-first-of-type:rounded-bl-8 group-last-of-type:rounded-tr-8 group-last-of-type:rounded-br-8 group-not-last-of-type:border-r-0 peer-checked:z-10 group-not-first:-ml-2',
+  radioButtonsLabel: 'peer-hover:peer-not-checked:i-bg-$color-buttongroup-primary-background-hover peer-checked:i-text-$color-buttongroup-primary-text-selected peer-checked:i-bg-$color-buttongroup-primary-background-selected peer-checked:i-border-$color-buttongroup-primary-border-selected block relative text-s font-bold cursor-pointer i-text-$color-buttongroup-primary-text text-center i-bg-$color-buttongroup-primary-background border-2 i-border-$color-buttongroup-primary-border py-8 pl-12 pr-14 group-first-of-type:rounded-tl-8 group-first-of-type:rounded-bl-8 group-last-of-type:rounded-tr-8 group-last-of-type:rounded-br-8 group-not-last-of-type:border-r-0 peer-checked:z-10 group-not-first:-ml-2',
   radioButtonsJustified: 'flex!',
   radioButtonsGroupJustified: 'grow-1 shrink-0 basis-auto',
   radioButtonsLabelSmall: 'text-xs py-[5px]! px-[8px]!',
@@ -410,17 +410,18 @@ export const toggle = {
 };
 
 export const clickable = {
-  clickable: 'absolute inset-0 h-full w-full appearance-none cursor-pointer focusable focusable-inset',
-  clickableNotToggle: 'inset-0 absolute',
-  label: `px-12 ${label.label} py-8! cursor-pointer focusable focusable-inset`, 
-}
+  toggle: 'absolute inset-0 h-full w-full appearance-none cursor-pointer focusable focusable-inset',
+  label: `px-12 ${label.label} py-8! cursor-pointer focusable focusable-inset`,
+  buttonOrLink: 'bg-transparent focusable',
+  buttonOrLinkStretch: 'inset-0 absolute',
+};
 
 export const combobox = {
   wrapper: 'relative',
-  combobox: 'absolute left-0 right-0 pb-8 rounded-8 s-bg-default shadow-m',
+  combobox: 'absolute left-0 right-0 pb-8 rounded-8 i-bg-$color-combobox-background i-shadow-$shadow-combobox',
   textMatch: 'font-bold',
   listbox: 'm-0 p-0 select-none list-none',
-  option: 'block cursor-pointer p-8 hover:s-bg-hover',
-  optionSelected: 's-bg-selected',
+  option: 'block cursor-pointer p-8 hover:i-bg-$color-combobox-option-background-hover',
+  optionSelected: 'i-bg-$color-combobox-option-background-selected hover:i-bg-$color-combobox-option-background-selected-hover',
   a11y: 'sr-only',
-}
+};

package/component-classes/shortcuts.js

@@ -1,17 +1,17 @@
 import { button } from './index.js';
 
 export const buttons = {
-    'button': button.buttonSecondary,
-    'button--secondary': button.buttonSecondary,
-    'button--default': button.buttonSecondary,
-    'button--small': button.buttonSmall,
-    'button--link': button.buttonLink,
-    'button--primary': button.buttonPrimary,
-    'button--cta': button.buttonPrimary,
-    'button--pill': button.buttonPill,
-    'button--utility': button.buttonUtility,
-    'button--utility-flat': button.buttonUtilityFlat,
-    'button--destructive': button.buttonDestructive,
-    'button--destructive-flat': button.buttonDestructiveFlat,
-    'button--flat': button.buttonFlat,
-}
+  'button': button.buttonSecondary,
+  'button--secondary': button.buttonSecondary,
+  'button--default': button.buttonSecondary,
+  'button--small': button.buttonSmall,
+  'button--link': button.buttonLink,
+  'button--primary': button.buttonPrimary,
+  'button--cta': button.buttonPrimary,
+  'button--pill': button.buttonPill,
+  'button--utility': button.buttonUtility,
+  'button--utility-flat': button.buttonUtilityFlat,
+  'button--destructive': button.buttonDestructive,
+  'button--destructive-flat': button.buttonDestructiveFlat,
+  'button--flat': button.buttonFlat,
+};

package/package.json

@@ -1,13 +1,16 @@
 {
   "name": "@warp-ds/css",
-  "version": "1.0.0-alpha.9",
+  "repository": "git@github.com:warp-ds/css.git",
+  "version": "1.0.0",
   "scripts": {
     "build": "pnpm build:tokens && pnpm build:resets && pnpm build:cc",
     "commit": "cz",
     "semantic-release": "semantic-release",
-    "build:cc": "cd component-classes && tsc && vite build",
+    "build:cc": "cd component-classes && rm -rf *.d.ts && tsc && vite build",
     "build:tokens": "cd tokens && node index.js",
-    "build:resets": "cd resets && node index.js"
+    "build:resets": "cd resets && node index.js",
+    "lint:fix": "eslint . --fix",
+    "lint:check": "eslint ."
   },
   "type": "module",
   "exports": {
@@ -16,7 +19,19 @@
     "./component-classes/classes": "./component-classes/classes.js",
     "./component-classes/shortcuts": "./component-classes/shortcuts.js"
   },
-  "types": "./component-classes/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "./component-classes": [
+        "./component-classes/index.d.ts"
+      ],
+      "./component-classes/classes": [
+        "./component-classes/classes.d.ts"
+      ],
+      "./component-classes/shortcuts": [
+        "./component-classes/shortcuts.d.ts"
+      ]
+    }
+  },
   "files": [
     "./component-classes/index.js",
     "./component-classes/classes.js",
@@ -24,11 +39,9 @@
     "./component-classes/index.d.ts"
   ],
   "dependencies": {
-    "drnm": "^0.9.0",
-    "lightningcss": "^1.19.0",
-    "@sindresorhus/slugify": "^2.2.0",
+    "@warp-ds/fonts": "1.1.0",
     "@warp-ds/tokenizer": "^0.0.2",
-    "@warp-ds/uno": "^1.0.0-alpha.49"
+    "@warp-ds/uno": "^1.0.0"
   },
   "devDependencies": {
     "@eik/cli": "^2.0.22",
@@ -36,11 +49,19 @@
     "@semantic-release/exec": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "cz-conventional-changelog": "^3.3.0",
+    "@warp-ds/eslint-config": "^0.0.1",
+    "eslint": "^8.43.0",
     "semantic-release": "^20.1.3",
     "typescript": "^4.9.5",
     "unocss": "^0.53.1",
     "vite": "^4.3.9",
-    "vite-plugin-dts": "^2.3.0"
+    "vite-plugin-dts": "^2.3.0",
+    "@sindresorhus/slugify": "^2.2.0",
+    "drnm": "^0.9.0",
+    "lightningcss": "^1.19.0"
+  },
+  "eslintConfig": {
+    "extends": "@warp-ds"
   },
   "config": {
     "commitizen": {
@@ -54,5 +75,6 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
-  }
+  },
+  "license": "Apache-2.0"
 }