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

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

@@ -349,7 +349,6 @@ 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;

package/component-classes/index.js

@@ -65,7 +65,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 +111,7 @@ export const step = {
 export const steps = {
   steps: 'w-full',
   stepsHorizontal: 'flex',
-};
+}
 
 export const card = {
   card: 'cursor-pointer overflow-hidden relative transition-all',
@@ -140,7 +140,7 @@ export const switchToggle = {
   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 i-shadow-$shadow-switch-handle',
+  handleNotDisabled: 'i-bg-$color-switch-handle-background shadow-s',
   handleDisabled: 'i-bg-$color-switch-handle-background-disabled',
   a11y: 'sr-only',
 };
@@ -224,25 +224,25 @@ export const expandable = {
 export const button = {
   // Buttontypes
   buttonSecondary:
-    '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)
+    '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)
   buttonPrimary:
-    '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
+    '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
   buttonFlat:
-    '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
+    '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
   buttonDestructive:
-    '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
+    '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
   buttonDestructiveFlat:
-    '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
+    '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
   buttonUtility:
-    '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
+    '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
   buttonUtilityFlat:
-    '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
+    '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
   buttonPill:
-    '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 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 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);
   buttonLink:
-    'leading-[24] max-w-max 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
+    '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
   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,7 +264,7 @@ 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',
@@ -275,7 +275,7 @@ export const buttonGroupItem = {
   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!',
-};
+}
 
 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,8 +313,8 @@ 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',
@@ -322,11 +322,11 @@ export const input = {
   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!',
   readOnly: 'pl-0 bg-transparent border-0 pointer-events-none i-text-$color-input-text-read-only',
-  placeholder: 'placeholder:i-text-$color-input-text-placeholder',
+  placeholder: 'placeholder:s-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',
@@ -337,19 +337,19 @@ export const select = {
   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',
   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] ';
@@ -374,10 +374,9 @@ 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',
@@ -388,7 +387,7 @@ 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: `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-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: `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`,
   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',
@@ -402,7 +401,7 @@ export const toggle = {
   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 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',
+  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',
   radioButtonsJustified: 'flex!',
   radioButtonsGroupJustified: 'grow-1 shrink-0 basis-auto',
   radioButtonsLabelSmall: 'text-xs py-[5px]! px-[8px]!',
@@ -413,15 +412,15 @@ 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`,
-};
+  label: `px-12 ${label.label} py-8! cursor-pointer focusable focusable-inset`, 
+}
 
 export const combobox = {
   wrapper: 'relative',
-  combobox: 'absolute left-0 right-0 pb-8 rounded-8 i-bg-$color-combobox-background i-shadow-$shadow-combobox',
+  combobox: 'absolute left-0 right-0 pb-8 rounded-8 s-bg-default shadow-m',
   textMatch: 'font-bold',
   listbox: 'm-0 p-0 select-none list-none',
-  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',
+  option: 'block cursor-pointer p-8 hover:s-bg-hover',
+  optionSelected: 's-bg-selected',
   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,16 +1,13 @@
 {
   "name": "@warp-ds/css",
-  "repository": "git@github.com:warp-ds/css.git",
-  "version": "1.0.0-alpha.20",
+  "version": "1.0.0-alpha.9",
   "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:tokens": "cd tokens && node index.js",
-    "build:resets": "cd resets && node index.js",
-    "lint:fix": "eslint . --fix",
-    "lint:check": "eslint ."
+    "build:resets": "cd resets && node index.js"
   },
   "type": "module",
   "exports": {
@@ -39,17 +36,12 @@
     "@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"
   },
-  "eslintConfig": {
-    "extends": "@warp-ds"
-  },
   "config": {
     "commitizen": {
       "path": "./node_modules/cz-conventional-changelog"
@@ -62,6 +54,5 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
-  },
-  "license": "Apache-2.0"
+  }
 }