@warp-ds/css 2.0.0-v2.1 → 2.0.0-v2.2

package/component-classes/index.d.ts

@@ -1,19 +1,3 @@
-export namespace attention {
-    const base: string;
-    const tooltip: string;
-    const callout: string;
-    const popover: string;
-    const arrowBase: string;
-    const arrowDirectionLeft: string;
-    const arrowDirectionRight: string;
-    const arrowDirectionBottom: string;
-    const arrowDirectionTop: string;
-    const arrowTooltip: string;
-    const arrowCallout: string;
-    const arrowPopover: string;
-    const content: string;
-    const notCallout: string;
-}
 export namespace pageIndicator {
     const wrapper: string;
     const dot: string;
@@ -21,21 +5,20 @@ export namespace pageIndicator {
     const active: string;
 }
 export namespace ribbon {
-    const base_1: string;
-    export { base_1 as base };
-    export const info: string;
-    export const success: string;
-    export const warning: string;
-    export const error: string;
-    export const disabled: string;
-    export const sponsored: string;
-    export const neutral: string;
-    export const roundedTopRightBottomLeft: string;
-    export const roundedTopLeftBottomRight: string;
+    const base: string;
+    const info: string;
+    const success: string;
+    const warning: string;
+    const error: string;
+    const disabled: string;
+    const sponsored: string;
+    const neutral: string;
+    const roundedTopRightBottomLeft: string;
+    const roundedTopLeftBottomRight: string;
 }
 export namespace badge {
-    const base_2: string;
-    export { base_2 as base };
+    const base_1: string;
+    export { base_1 as base };
     const neutral_1: string;
     export { neutral_1 as neutral };
     const info_1: string;
@@ -89,28 +72,27 @@ export namespace pill {
     const a11y: string;
 }
 export namespace step {
-    export const step: string;
-    export const stepVertical: string;
-    export const stepVerticalLeft: string;
-    export const stepVerticalRight: string;
-    export const stepHorizontal: string;
-    export const stepDot: string;
-    export const stepDotVerticalRight: string;
-    export const stepDotHorizontal: string;
-    export const stepDotActive: string;
-    export const stepDotIncomplete: string;
-    export const stepLine: string;
-    export const stepLineVertical: string;
-    export const stepLineVerticalRight: string;
-    export const stepLineHorizontal: string;
-    export const stepLineHorizontalRight: string;
-    export const stepLineHorizontalLeft: string;
-    export const stepLineIncomplete: string;
-    export const stepLineComplete: string;
-    const content_1: string;
-    export { content_1 as content };
-    export const contentVertical: string;
-    export const contentHorizontal: string;
+    const step: string;
+    const stepVertical: string;
+    const stepVerticalLeft: string;
+    const stepVerticalRight: string;
+    const stepHorizontal: string;
+    const stepDot: string;
+    const stepDotVerticalRight: string;
+    const stepDotHorizontal: string;
+    const stepDotActive: string;
+    const stepDotIncomplete: string;
+    const stepLine: string;
+    const stepLineVertical: string;
+    const stepLineVerticalRight: string;
+    const stepLineHorizontal: string;
+    const stepLineHorizontalRight: string;
+    const stepLineHorizontalLeft: string;
+    const stepLineIncomplete: string;
+    const stepLineComplete: string;
+    const content: string;
+    const contentVertical: string;
+    const contentHorizontal: string;
 }
 export namespace steps {
     const steps: string;
@@ -150,8 +132,8 @@ export namespace switchToggle {
 }
 export namespace toaster {
     export const container: string;
-    const content_2: string;
-    export { content_2 as content };
+    const content_1: string;
+    export { content_1 as content };
     export const toaster: string;
 }
 export namespace toast {
@@ -169,8 +151,8 @@ export namespace toast {
     export const iconWarning: string;
     export const iconNegative: string;
     export const iconLoading: string;
-    const content_3: string;
-    export { content_3 as content };
+    const content_2: string;
+    export { content_2 as content };
     const close_1: string;
     export { close_1 as close };
 }
@@ -185,8 +167,8 @@ export namespace tab {
     const icon_1: string;
     export { icon_1 as icon };
     export const iconUnderlinedActive: string;
-    const content_4: string;
-    export { content_4 as content };
+    const content_3: string;
+    export { content_3 as content };
     export const contentUnderlined: string;
     export const contentUnderlinedActive: string;
 }
@@ -211,7 +193,9 @@ export namespace expandable {
     export const chevron: string;
     export const chevronNonBox: string;
     export const chevronBox: string;
-    export const chevronExpanded: string;
+    export const chevronTransform: string;
+    export const chevronExpand: string;
+    export const chevronCollapse: string;
     export const expansion: string;
     export const expansionNotExpanded: string;
     const button_1: string;
@@ -308,8 +292,8 @@ export namespace modal {
     export const transparentBg: string;
     export const backdrop: string;
     export const modal: string;
-    const content_5: string;
-    export { content_5 as content };
+    const content_4: string;
+    export { content_4 as content };
     export const footer: string;
     export const transitionTitle: string;
     export const transitionTitleCenter: string;
@@ -469,3 +453,24 @@ export namespace combobox {
     const a11y_6: string;
     export { a11y_6 as a11y };
 }
+export namespace attention {
+    const base_2: string;
+    export { base_2 as base };
+    export const tooltip: string;
+    export const callout: string;
+    export const highlight: string;
+    export const popover: string;
+    export const arrowBase: string;
+    export const arrowDirectionLeft: string;
+    export const arrowDirectionRight: string;
+    export const arrowDirectionBottom: string;
+    export const arrowDirectionTop: string;
+    export const arrowTooltip: string;
+    export const arrowCallout: string;
+    export const arrowPopover: string;
+    export const arrowHighlight: string;
+    const content_5: string;
+    export { content_5 as content };
+    export const notCallout: string;
+    export const closeBtn: string;
+}

package/component-classes/index.js

@@ -1,23 +1,3 @@
-export const attention = {
-  base: 'border-2 relative',
-  tooltip:
-    'i-bg-$color-tooltip-background i-border-$color-tooltip-background i-shadow-$shadow-tooltip i-text-$color-tooltip-text rounded-4 py-6 px-8',
-  callout: 'i-bg-$color-callout-background i-border-$color-callout-border i-text-$color-callout-text py-8 px-16 rounded-8',
-  popover:
-    'i-bg-$color-popover-background i-border-$color-popover-background i-text-$color-popover-paragraph-text rounded-8 p-16 drop-shadow-m',
-  arrowBase:
-    'absolute h-[14px] w-[14px] border-2 border-b-0 border-r-0 rounded-tl-4 transform',
-  arrowDirectionLeft: '-left-[8px]',
-  arrowDirectionRight: '-right-[8px]',
-  arrowDirectionBottom: '-bottom-[8px]',
-  arrowDirectionTop: '-top-[8px]',
-  arrowTooltip: 'i-bg-$color-tooltip-background i-border-$color-tooltip-background',
-  arrowCallout: 'i-bg-$color-callout-background i-border-$color-callout-border',
-  arrowPopover: 'i-bg-$color-popover-background i-border-$color-popover-background',
-  content: 'last-child:mb-0',
-  notCallout: 'absolute z-50',
-};
-
 export const pageIndicator = {
   wrapper: 'flex space-x-8 p-8',
   dot: 'h-8 w-8 rounded-full',
@@ -225,10 +205,12 @@ export const expandable = {
   expandableTitle: 'font-bold i-text-$color-expandable-title-text',
   expandableBox: 'i-bg-$color-expandable-background hover:i-bg-$color-expandable-background-hover py-0 px-0 ' + box.box,
   expandableBleed: box.bleed,
-  chevron: 'inline-block align-middle transform transition-transform transform-gpu i-text-$color-expandable-icon',
+  chevron: 'inline-block align-middle i-text-$color-expandable-icon',
   chevronNonBox: 'relative left-8',
   chevronBox: 'absolute right-16',
-  chevronExpanded: '-rotate-180',
+  chevronTransform: 'transform transition-transform transform-gpu ease-in-out',
+  chevronExpand: '-rotate-180',
+  chevronCollapse: 'rotate-180',
   expansion: 'overflow-hidden',
   expansionNotExpanded: 'h-0 invisible',
   button: buttonReset + ' hover:underline focus:underline',
@@ -402,7 +384,7 @@ export const modal = {
   title:
     '-mt-4 sm:-mt-8 h-40 sm:h-48 grid gap-8 sm:gap-16 grid-cols-[auto_1fr_auto] items-center px-16 sm:px-32 border-b sm:border-b-0 shrink-0',
   titleText: 'mb-0 h4 sm:h3',
-  titleButton: button.pill + ' sm:min-h-[32px] sm:min-w-[32px]',
+  titleButton: `${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill} sm:min-h-[44px] sm:min-w-[44px] min-h-[32px] min-w-[32px]`,
   titleButtonLeft: '-ml-8 sm:-ml-12 justify-self-start',
   titleButtonRight: '-mr-8 sm:-mr-12 justify-self-end',
   titleButtonIcon: 'h-16 w-16 sm:h-24 sm:w-24',
@@ -534,4 +516,27 @@ export const combobox = {
   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',
+};
+
+export const attention = {
+  base: 'border-2 relative flex items-start',
+  tooltip:
+    'i-bg-$color-tooltip-background i-border-$color-tooltip-background i-shadow-$shadow-tooltip i-text-$color-tooltip-text rounded-4 py-6 px-8',
+  callout: 'i-bg-$color-callout-background i-border-$color-callout-border i-text-$color-callout-text py-8 px-16 rounded-8',
+  highlight: 'i-bg-$color-callout-background i-border-$color-callout-border i-text-$color-callout-text py-8 px-16 rounded-8 drop-shadow-m',
+  popover:
+    'i-bg-$color-popover-background i-border-$color-popover-background i-text-$color-popover-paragraph-text rounded-8 p-16 drop-shadow-m',
+  arrowBase:
+    'absolute h-[14px] w-[14px] border-2 border-b-0 border-r-0 rounded-tl-4 transform',
+  arrowDirectionLeft: '-left-[8px]',
+  arrowDirectionRight: '-right-[8px]',
+  arrowDirectionBottom: '-bottom-[8px]',
+  arrowDirectionTop: '-top-[8px]',
+  arrowTooltip: 'i-bg-$color-tooltip-background i-border-$color-tooltip-background',
+  arrowCallout: 'i-bg-$color-callout-background i-border-$color-callout-border',
+  arrowPopover: 'i-bg-$color-popover-background i-border-$color-popover-background',
+  arrowHighlight: 'i-bg-$color-callout-background i-border-$color-callout-border',
+  content: 'last-child:mb-0',
+  notCallout: 'absolute z-50',
+  closeBtn: `${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill} justify-self-end -mr-8 ml-8`,
 };

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@warp-ds/css",
   "repository": "git@github.com:warp-ds/css.git",
-  "version": "2.0.0-v2.1",
+  "version": "2.0.0-v2.2",
   "scripts": {
     "build": "pnpm build:tokens && pnpm build:resets && pnpm build:cc",
     "commit": "cz",
     "semantic-release": "semantic-release",
-    "build:cc": "cd component-classes && rm -rf *.d.ts && tsc && vite build && node ./scripts/updateClassesToPurge.js",
+    "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",
     "lint:fix": "eslint . --fix",