Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@warp-ds/component-classes
Advanced tools
@warp-ds/component-classes - npm Package Compare versions
Comparing version 1.0.0-alpha.109 to 1.0.0-alpha.110
38
index.js
@@ -73,3 +73,3 @@ export const attention = { | ||
| pill: 'flex items-center', | ||
| button: 'inline-flex items-center focusable text-12 transition-all', | ||
| button: 'inline-flex items-center focusable text-xs transition-all', | ||
| suggestion: 'i-bg-$color-pill-suggestion-background hover:i-bg-$color-pill-suggestion-background-hover active:i-bg-$color-pill-suggestion-background-active i-text-$color-pill-suggestion-text font-bold', | ||
@@ -151,6 +151,6 @@ filter: 'i-bg-$color-pill-filter-background hover:i-bg-$color-pill-filter-background-hover active:i-bg-$color-pill-filter-background-active i-text-$color-pill-filter-text', | ||
| container: | ||
| 'fixed fixed-ios-fix bottom-16 left-0 right-0 mx-8 sm:mx-16 z-50 pointer-events-none', | ||
| 'fixed transform translate-z-0 bottom-16 left-0 right-0 mx-8 sm:mx-16 z-50 pointer-events-none', | ||
| content: 'w-full', | ||
| toaster: | ||
| 'grid f-grid auto-rows-auto justify-items-center justify-center mx-auto pointer-events-none', | ||
| 'grid auto-rows-auto justify-items-center justify-center mx-auto pointer-events-none', | ||
| }; | ||
@@ -165,3 +165,3 @@ | ||
| negative: 'i-bg-$color-toast-negative-background i-border-$color-toast-negative-subtle-border i-text-$color-toast-negative-text', | ||
| icon: 'flex-shrink-0 rounded-full w-[16px] h-[16px] m-[8px]', | ||
| icon: 'shrink-0 rounded-full w-[16px] h-[16px] m-[8px]', | ||
| iconPositive: 'i-text-$color-toast-positive-icon', | ||
@@ -176,3 +176,3 @@ iconWarning: 'i-text-$color-toast-warning-icon', | ||
| export const tabs = { | ||
| tabContainer: 'mx-auto max-w-screen-md w-full grid f-grid relative', | ||
| tabContainer: 'mx-auto max-w-screen-md w-full grid relative', | ||
| wunderbar: | ||
@@ -185,3 +185,3 @@ 'absolute i-border-$color-tabs-border-active -bottom-0 border-b-4 transition-all', | ||
| export const tab = { | ||
| tab: 'grid f-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', | ||
| 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', | ||
@@ -216,3 +216,3 @@ icon: 'mx-auto hover:i-text-$color-tabs-text-hover', | ||
| expandableBleed: box.bleed, | ||
| chevron: 'inline-block align-middle transform transition-transform transition-gpu i-text-$color-expandable-icon', | ||
| chevron: 'inline-block align-middle transform transition-transform transform-gpu i-text-$color-expandable-icon', | ||
| chevronNonBox: 'relative left-8', | ||
@@ -251,3 +251,3 @@ chevronBox: 'absolute right-16', | ||
| // Sizestuff | ||
| buttonSmall: 'px-16 py-6 text-12 leading-16', // .button--small | ||
| 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 | ||
@@ -295,3 +295,3 @@ buttonSmallSecondary: 'py-6', // .button--small.button--secondary | ||
| content: | ||
| 'block overflow-y-auto overflow-x-hidden last-child:mb-0 flex-grow shrink px-16 sm:px-32 relative', | ||
| 'block overflow-y-auto overflow-x-hidden last-child:mb-0 grow shrink px-16 sm:px-32 relative', | ||
| footer: 'flex justify-end shrink-0 px-16 sm:px-32', | ||
@@ -328,3 +328,3 @@ transitionTitle: 'transition-all duration-300', | ||
| export const input = { | ||
| default: 'block text-16 mb-0 leading-22 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', | ||
| 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]', | ||
@@ -341,3 +341,3 @@ 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', | ||
| export const select = { | ||
| default: 'block text-16 mb-0 leading-22 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', | ||
| 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', | ||
| disabled: 'i-bg-$color-select-background-disabled i-border-$color-select-border-disabled hover:i-border-$color-select-border-disabled! active:i-border-$color-select-border-disabled! i-text-$color-select-text-disabled pointer-events-none', | ||
@@ -353,9 +353,9 @@ invalid: 'i-border-$color-select-border-negative', | ||
| export const label = { | ||
| label: 'antialiased block relative text-14 font-bold pb-4 cursor-pointer i-text-$color-label-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-14 i-text-$color-label-optional-text', | ||
| optional: 'pl-8 font-normal text-s i-text-$color-label-optional-text', | ||
| } | ||
| export const helpText = { | ||
| helpText: 'text-12 mt-4 block i-text-$color-helptext-text', | ||
| helpText: 'text-xs mt-4 block i-text-$color-helptext-text', | ||
| helpTextValid: 'i-text-$color-helptext-text-positive', | ||
@@ -372,3 +372,3 @@ helpTextInvalid: 'i-text-$color-helptext-text-negative' | ||
| wrapperWithIcon: 'w-40', | ||
| label: `${label.label} pb-0! text-12!`, | ||
| label: `${label.label} pb-0! text-xs!`, | ||
| }; | ||
@@ -380,3 +380,3 @@ | ||
| wrapperWithIcon: 'w-40', | ||
| label: `${label.label} pb-0! text-12!`, | ||
| label: `${label.label} pb-0! text-xs!`, | ||
| }; | ||
@@ -400,3 +400,3 @@ | ||
| focusableWithin: 'focus-within:focusable', | ||
| label: 'cursor-pointer text-16 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', | ||
| 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', | ||
@@ -418,6 +418,6 @@ noContent: `before:content-[""]`, | ||
| 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-14 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-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-12 py-[5px]! px-[8px]!', | ||
| radioButtonsLabelSmall: 'text-xs py-[5px]! px-[8px]!', | ||
| icon: `peer-checked:before:bg-center before:bg-[url(var(--w-form-check-mark))]`, | ||
@@ -424,0 +424,0 @@ a11y: 'sr-only', |
| { | ||
| "name": "@warp-ds/component-classes", | ||
| "repository": "git@github.com:warp-ds/component-classes.git", | ||
| "version": "1.0.0-alpha.109", | ||
| "version": "1.0.0-alpha.110", | ||
| "description": "WARP component classes", | ||
@@ -6,0 +6,0 @@ "type": "module", |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.29%
115480
- Lines of code
- increased by0.14%
1405
No dependency changes