@warp-ds/css 1.0.1 → 1.1.0-next.2

package/README.md

@@ -11,9 +11,9 @@ The CSS files should be used directly from Eik. This is because we can alias rel
 
 We publish 3 css files.
 
-- 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" />  
+- Resets: `https://assets.finn.no/pkg/@warp-ds/css/v1/resets.css`
+- Components css: `https://assets.finn.no/pkg/@warp-ds/css/v1/components.css`
+- Brand css with tokens: `https://assets.finn.no/pkg/@warp-ds/css/v1/tokens/[BRANDNAME e.g. tori-fi].css`
 
 ## Usage (npm)
 

package/component-classes/index.d.ts

@@ -33,6 +33,27 @@ export namespace ribbon {
     export const roundedTopRightBottomLeft: string;
     export const roundedTopLeftBottomRight: string;
 }
+export namespace badge {
+    const base_2: string;
+    export { base_2 as base };
+    const neutral_1: string;
+    export { neutral_1 as neutral };
+    const info_1: string;
+    export { info_1 as info };
+    export const positive: string;
+    const warning_1: string;
+    export { warning_1 as warning };
+    export const negative: string;
+    const disabled_1: string;
+    export { disabled_1 as disabled };
+    export const price: string;
+    export const notification: string;
+    export const positionBase: string;
+    export const positionTL: string;
+    export const positionTR: string;
+    export const positionBR: string;
+    export const positionBL: string;
+}
 export namespace slider {
     const wrapper_1: string;
     export { wrapper_1 as wrapper };
@@ -47,10 +68,10 @@ export namespace slider {
 export namespace box {
     export const box: string;
     export const bleed: string;
-    const info_1: string;
-    export { info_1 as info };
-    const neutral_1: string;
-    export { neutral_1 as neutral };
+    const info_2: string;
+    export { info_2 as info };
+    const neutral_2: string;
+    export { neutral_2 as neutral };
     export const bordered: string;
     export const infoClickable: string;
     export const neutralClickable: string;
@@ -137,10 +158,12 @@ export namespace toast {
     const wrapper_2: string;
     export { wrapper_2 as wrapper };
     export const toast: string;
-    export const positive: string;
-    const warning_1: string;
-    export { warning_1 as warning };
-    export const negative: string;
+    const positive_1: string;
+    export { positive_1 as positive };
+    const warning_2: string;
+    export { warning_2 as warning };
+    const negative_1: string;
+    export { negative_1 as negative };
     export const icon: string;
     export const iconPositive: string;
     export const iconWarning: string;
@@ -236,8 +259,8 @@ export namespace button {
     export const utilitySmallLoading: string;
     export const utilityQuietLoading: string;
     export const utilitySmallQuietLoading: string;
-    const negative_1: string;
-    export { negative_1 as negative };
+    const negative_2: string;
+    export { negative_2 as negative };
     export const negativeDisabled: string;
     export const negativeQuiet: string;
     export const negativeQuietDisabled: string;
@@ -306,25 +329,25 @@ export namespace alert {
     export { title_2 as title };
     const icon_2: string;
     export { icon_2 as icon };
-    const negative_2: string;
-    export { negative_2 as negative };
+    const negative_3: string;
+    export { negative_3 as negative };
     export const negativeIcon: string;
-    const positive_1: string;
-    export { positive_1 as positive };
+    const positive_2: string;
+    export { positive_2 as positive };
     export const positiveIcon: string;
-    const warning_2: string;
-    export { warning_2 as warning };
+    const warning_3: string;
+    export { warning_3 as warning };
     export const warningIcon: string;
-    const info_2: string;
-    export { info_2 as info };
+    const info_3: string;
+    export { info_3 as info };
     export const infoIcon: string;
 }
 export namespace input {
     const _default: string;
     export { _default as default };
     export const textArea: string;
-    const disabled_1: string;
-    export { disabled_1 as disabled };
+    const disabled_2: string;
+    export { disabled_2 as disabled };
     export const invalid: string;
     export const readOnly: string;
     export const placeholder: string;
@@ -336,8 +359,8 @@ export namespace input {
 export namespace select {
     const _default_1: string;
     export { _default_1 as default };
-    const disabled_2: string;
-    export { disabled_2 as disabled };
+    const disabled_3: string;
+    export { disabled_3 as disabled };
     const invalid_1: string;
     export { invalid_1 as invalid };
     const readOnly_1: string;

package/component-classes/index.js

@@ -25,6 +25,7 @@ export const pageIndicator = {
   active: 'i-bg-$color-pageindicator-background-selected',
 };
 
+// Deprecated: Use Badge component
 export const ribbon = {
   base: 'py-4 px-8 border rounded-4 inline-flex last:mb-0',
   info: 'i-border-$color-badge-info-background i-bg-$color-badge-info-background i-text-$color-badge-info-text',
@@ -38,6 +39,23 @@ export const ribbon = {
   roundedTopLeftBottomRight: 'rounded-tl-0 rounded-br-0',
 };
 
+export const badge = {
+  base: 'py-4 px-8 border-0 rounded-4 text-xs inline-flex',
+  neutral: 'i-bg-$color-badge-neutral-background i-text-$color-badge-neutral-text',
+  info: 'i-bg-$color-badge-info-background i-text-$color-badge-info-text',
+  positive: 'i-bg-$color-badge-positive-background i-text-$color-badge-positive-text',
+  warning: 'i-bg-$color-badge-warning-background i-text-$color-badge-warning-text',
+  negative: 'i-bg-$color-badge-negative-background i-text-$color-badge-negative-text',
+  disabled: 'i-bg-$color-badge-disabled-background i-text-$color-badge-disabled-text',
+  price: 'i-bg-$color-badge-price-background i-text-$color-badge-price-text',
+  notification: 'i-bg-$color-badge-notification-background i-text-$color-badge-notification-text',
+  positionBase: 'absolute backdrop-blur',
+  positionTL: 'rounded-tl-0 rounded-tr-0 rounded-bl-0 top-0 left-0',
+  positionTR: 'rounded-tl-0 rounded-tr-0 rounded-br-0 top-0 right-0',
+  positionBR: 'rounded-tr-0 rounded-br-0 rounded-bl-0 bottom-0 right-0',
+  positionBL: 'rounded-tl-0 rounded-br-0 rounded-bl-0 bottom-0 left-0',
+};
+
 export const slider = {
   wrapper: 'touch-pan-y relative w-full h-44 py-2',
   track:

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@warp-ds/css",
   "repository": "git@github.com:warp-ds/css.git",
-  "version": "1.0.1",
+  "version": "1.1.0-next.2",
   "scripts": {
     "build": "pnpm build:tokens && pnpm build:resets && pnpm build:cc",
     "commit": "cz",