oneslash-design-system 1.3.5 → 1.5.0

package/dist/output.css

@@ -545,9 +545,15 @@ video {
 .pointer-events-auto{
   pointer-events: auto;
 }
+.\!visible{
+  visibility: visible !important;
+}
 .visible{
   visibility: visible;
 }
+.static{
+  position: static;
+}
 .fixed{
   position: fixed;
 }
@@ -606,6 +612,10 @@ video {
 .hidden{
   display: none;
 }
+.size-4{
+  width: 1rem;
+  height: 1rem;
+}
 .size-5{
   width: 1.25rem;
   height: 1.25rem;
@@ -686,10 +696,28 @@ video {
 .flex-shrink-0{
   flex-shrink: 0;
 }
+.-translate-y-3{
+  --tw-translate-y: -0.75rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.translate-y-0{
+  --tw-translate-y: 0px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .rotate-180{
   --tw-rotate: 180deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.scale-100{
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.scale-95{
+  --tw-scale-x: .95;
+  --tw-scale-y: .95;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .transform{
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
@@ -711,6 +739,9 @@ video {
 .cursor-wait{
   cursor: wait;
 }
+.resize{
+  resize: both;
+}
 .flex-row{
   flex-direction: row;
 }
@@ -872,10 +903,6 @@ video {
 .bg-\[var\(--light-bg\)\]{
   background-color: var(--light-bg);
 }
-.bg-black{
-  --tw-bg-opacity: 1;
-  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
-}
 .bg-dark-background-accent300{
   --tw-bg-opacity: 1;
   background-color: rgb(79 79 79 / var(--tw-bg-opacity));
@@ -908,14 +935,18 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(232 232 232 / var(--tw-bg-opacity));
 }
-.bg-light-error-light{
+.bg-light-error-alertBg{
   --tw-bg-opacity: 1;
-  background-color: rgb(242 119 119 / var(--tw-bg-opacity));
+  background-color: rgb(242 196 196 / var(--tw-bg-opacity));
 }
 .bg-light-error-main{
   --tw-bg-opacity: 1;
   background-color: rgb(211 47 47 / var(--tw-bg-opacity));
 }
+.bg-light-info-alertBg{
+  --tw-bg-opacity: 1;
+  background-color: rgb(184 217 240 / var(--tw-bg-opacity));
+}
 .bg-light-info-main{
   --tw-bg-opacity: 1;
   background-color: rgb(0 135 212 / var(--tw-bg-opacity));
@@ -924,6 +955,9 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(209 209 209 / var(--tw-bg-opacity));
 }
+.bg-light-misc-scrim\/40{
+  background-color: rgb(0 0 0 / 0.4);
+}
 .bg-light-primary-dark{
   --tw-bg-opacity: 1;
   background-color: rgb(38 38 38 / var(--tw-bg-opacity));
@@ -936,6 +970,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(176 176 176 / var(--tw-bg-opacity));
 }
+.bg-light-success-alertBg{
+  --tw-bg-opacity: 1;
+  background-color: rgb(196 226 197 / var(--tw-bg-opacity));
+}
 .bg-light-success-main{
   --tw-bg-opacity: 1;
   background-color: rgb(50 135 54 / var(--tw-bg-opacity));
@@ -952,6 +990,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(109 109 109 / var(--tw-bg-opacity));
 }
+.bg-light-warning-alertBg{
+  --tw-bg-opacity: 1;
+  background-color: rgb(245 213 176 / var(--tw-bg-opacity));
+}
 .bg-light-warning-main{
   --tw-bg-opacity: 1;
   background-color: rgb(239 108 0 / var(--tw-bg-opacity));
@@ -959,12 +1001,12 @@ video {
 .bg-transparent{
   background-color: transparent;
 }
-.bg-opacity-50{
-  --tw-bg-opacity: 0.5;
-}
 .object-cover{
   object-fit: cover;
 }
+.p-0\.5{
+  padding: 0.125rem;
+}
 .p-1{
   padding: 0.25rem;
 }
@@ -1043,18 +1085,38 @@ video {
   --tw-text-opacity: 1;
   color: rgb(238 238 238 / var(--tw-text-opacity));
 }
+.text-light-accent-contrast{
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
 .text-light-accent-main{
   --tw-text-opacity: 1;
   color: rgb(238 174 3 / var(--tw-text-opacity));
 }
+.text-light-error-contrast{
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+.text-light-error-dark{
+  --tw-text-opacity: 1;
+  color: rgb(178 35 35 / var(--tw-text-opacity));
+}
 .text-light-error-main{
   --tw-text-opacity: 1;
   color: rgb(211 47 47 / var(--tw-text-opacity));
 }
+.text-light-info-contrast{
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
 .text-light-info-main{
   --tw-text-opacity: 1;
   color: rgb(0 135 212 / var(--tw-text-opacity));
 }
+.text-light-success-contrast{
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
 .text-light-success-main{
   --tw-text-opacity: 1;
   color: rgb(50 135 54 / var(--tw-text-opacity));
@@ -1075,13 +1137,13 @@ video {
   --tw-text-opacity: 1;
   color: rgb(109 109 109 / var(--tw-text-opacity));
 }
-.text-light-warning-main{
+.text-light-warning-contrast{
   --tw-text-opacity: 1;
-  color: rgb(239 108 0 / var(--tw-text-opacity));
+  color: rgb(255 255 255 / var(--tw-text-opacity));
 }
-.text-white{
+.text-light-warning-main{
   --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
+  color: rgb(239 108 0 / var(--tw-text-opacity));
 }
 .underline{
   text-decoration-line: underline;
@@ -1151,6 +1213,11 @@ video {
 .filter{
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+.transition-\[opacity\2c transform\]{
+  transition-property: opacity,transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 .transition-all{
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -1161,11 +1228,6 @@ video {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
-.transition-opacity{
-  transition-property: opacity;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
 .transition-transform{
   transition-property: transform;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -1174,12 +1236,15 @@ video {
 .duration-200{
   transition-duration: 200ms;
 }
+.duration-300{
+  transition-duration: 300ms;
+}
+.ease-\[cubic-bezier\(0\.16\2c 1\2c 0\.3\2c 1\)\]{
+  transition-timing-function: cubic-bezier(0.16,1,0.3,1);
+}
 .ease-in-out{
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
-.ease-out{
-  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-}
 .scrollbar::-webkit-scrollbar-track{
   background-color: var(--scrollbar-track);
   border-radius: var(--scrollbar-track-radius);
@@ -1265,12 +1330,12 @@ body {
   background-color: rgb(178 35 35 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-light-error-main\/10:hover{
-  background-color: rgb(211 47 47 / 0.1);
+.hover\:bg-light-error-light\/60:hover{
+  background-color: rgb(242 119 119 / 0.6);
 }
 
-.hover\:bg-light-error-main\/20:hover{
-  background-color: rgb(211 47 47 / 0.2);
+.hover\:bg-light-error-main\/10:hover{
+  background-color: rgb(211 47 47 / 0.1);
 }
 
 .hover\:bg-light-secondary-dark:hover{
@@ -1302,6 +1367,13 @@ body {
   color: rgb(204 83 2 / var(--tw-text-opacity));
 }
 
+@media (prefers-reduced-motion: reduce){
+
+  .motion-reduce\:transition-none{
+    transition-property: none;
+  }
+}
+
 .dark\:border-dark-accent-main:is(.dark *){
   --tw-border-opacity: 1;
   border-color: rgb(255 205 41 / var(--tw-border-opacity));
@@ -1415,9 +1487,9 @@ body {
   background-color: rgb(38 38 38 / var(--tw-bg-opacity));
 }
 
-.dark\:bg-dark-error-light:is(.dark *){
+.dark\:bg-dark-error-alertBg:is(.dark *){
   --tw-bg-opacity: 1;
-  background-color: rgb(242 119 119 / var(--tw-bg-opacity));
+  background-color: rgb(92 26 26 / var(--tw-bg-opacity));
 }
 
 .dark\:bg-dark-error-main:is(.dark *){
@@ -1425,6 +1497,11 @@ body {
   background-color: rgb(231 76 76 / var(--tw-bg-opacity));
 }
 
+.dark\:bg-dark-info-alertBg:is(.dark *){
+  --tw-bg-opacity: 1;
+  background-color: rgb(10 58 92 / var(--tw-bg-opacity));
+}
+
 .dark\:bg-dark-info-main:is(.dark *){
   --tw-bg-opacity: 1;
   background-color: rgb(0 175 255 / var(--tw-bg-opacity));
@@ -1435,6 +1512,10 @@ body {
   background-color: rgb(64 64 64 / var(--tw-bg-opacity));
 }
 
+.dark\:bg-dark-misc-scrim\/40:is(.dark *){
+  background-color: rgb(0 0 0 / 0.4);
+}
+
 .dark\:bg-dark-primary-dark:is(.dark *){
   --tw-bg-opacity: 1;
   background-color: rgb(233 233 233 / var(--tw-bg-opacity));
@@ -1450,6 +1531,11 @@ body {
   background-color: rgb(79 79 79 / var(--tw-bg-opacity));
 }
 
+.dark\:bg-dark-success-alertBg:is(.dark *){
+  --tw-bg-opacity: 1;
+  background-color: rgb(26 74 29 / var(--tw-bg-opacity));
+}
+
 .dark\:bg-dark-success-main:is(.dark *){
   --tw-bg-opacity: 1;
   background-color: rgb(66 165 71 / var(--tw-bg-opacity));
@@ -1470,6 +1556,11 @@ body {
   background-color: rgb(176 176 176 / var(--tw-bg-opacity));
 }
 
+.dark\:bg-dark-warning-alertBg:is(.dark *){
+  --tw-bg-opacity: 1;
+  background-color: rgb(92 46 10 / var(--tw-bg-opacity));
+}
+
 .dark\:bg-dark-warning-main:is(.dark *){
   --tw-bg-opacity: 1;
   background-color: rgb(255 140 10 / var(--tw-bg-opacity));
@@ -1480,11 +1571,26 @@ body {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.dark\:text-dark-accent-contrast:is(.dark *){
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
 .dark\:text-dark-accent-main:is(.dark *){
   --tw-text-opacity: 1;
   color: rgb(255 205 41 / var(--tw-text-opacity));
 }
 
+.dark\:text-dark-error-contrast:is(.dark *){
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.dark\:text-dark-error-light:is(.dark *){
+  --tw-text-opacity: 1;
+  color: rgb(242 119 119 / var(--tw-text-opacity));
+}
+
 .dark\:text-dark-error-main:is(.dark *){
   --tw-text-opacity: 1;
   color: rgb(231 76 76 / var(--tw-text-opacity));
@@ -1530,11 +1636,6 @@ body {
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
 
-.dark\:text-white:is(.dark *){
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
-}
-
 .dark\:outline-dark-accent-main:is(.dark *){
   outline-color: #FFCD29;
 }
@@ -1579,12 +1680,12 @@ body {
   background-color: rgb(69 69 69 / var(--tw-bg-opacity));
 }
 
-.dark\:hover\:bg-dark-error-main\/10:hover:is(.dark *){
-  background-color: rgb(231 76 76 / 0.1);
+.dark\:hover\:bg-dark-error-dark\/60:hover:is(.dark *){
+  background-color: rgb(178 35 35 / 0.6);
 }
 
-.dark\:hover\:bg-dark-error-main\/20:hover:is(.dark *){
-  background-color: rgb(231 76 76 / 0.2);
+.dark\:hover\:bg-dark-error-main\/10:hover:is(.dark *){
+  background-color: rgb(231 76 76 / 0.1);
 }
 
 .dark\:hover\:bg-dark-secondary-dark:hover:is(.dark *){

package/dist/stories/Button.stories.jsx

@@ -1,3 +1,4 @@
+import React from "react";
 import Button from "../components/button";
 var meta = {
     title: "Components/Button",

package/dist/stories/IconButton.stories.jsx

@@ -14,7 +14,7 @@ var meta = {
         },
         size: {
             control: "select",
-            options: ["large", "medium", "small"],
+            options: ["large", "medium", "small", "tiny"],
         },
         iconName: { control: "text" },
         loading: { control: "boolean" },
@@ -80,6 +80,7 @@ export var Loading = {
 };
 export var AllSizes = {
     render: function () { return (<div style={{ display: "flex", gap: "16px", alignItems: "center" }}>
+      <IconButton color="primary" state="enabled" size="tiny" iconName="Star"/>
       <IconButton color="primary" state="enabled" size="small" iconName="Star"/>
       <IconButton color="primary" state="enabled" size="medium" iconName="Star"/>
       <IconButton color="primary" state="enabled" size="large" iconName="Star"/>

package/dist/stories/MenuItem.stories.d.ts

@@ -11,3 +11,4 @@ export declare const WithTagColor: Story;
 export declare const WithUserImage: Story;
 export declare const SmallSize: Story;
 export declare const WithRightAction: Story;
+export declare const WithCustomIcon: Story;

package/dist/stories/MenuItem.stories.jsx

@@ -1,3 +1,4 @@
+import React from "react";
 import MenuItem from "../components/menuItem";
 import IconButton from "../components/iconButton";
 var meta = {
@@ -77,3 +78,13 @@ export var WithRightAction = {
         rightAction: <IconButton iconName="X" size="small" color="tertiary" state="enabled" onClick={function () { return alert('Remove clicked'); }}/>,
     },
 };
+export var WithCustomIcon = {
+    args: {
+        label: "Brand Item",
+        icon: (<svg viewBox="0 0 16 16" className="w-4 h-4 fill-current">
+        <rect x="2" y="2" width="12" height="12" rx="3"/>
+      </svg>),
+        size: "small",
+        isSelected: false,
+    },
+};

package/dist/tailwind.config.js

@@ -50,41 +50,49 @@ var config = {
                 'light-error-dark': designTokens.colors.light.error.dark,
                 'light-error-light': designTokens.colors.light.error.light,
                 'light-error-alertBg': designTokens.colors.light.error.alertBg,
+                'light-error-contrast': designTokens.colors.light.error.contrast,
                 // dark: error colors
                 'dark-error-main': designTokens.colors.dark.error.main,
                 'dark-error-dark': designTokens.colors.dark.error.dark,
                 'dark-error-light': designTokens.colors.dark.error.light,
                 'dark-error-alertBg': designTokens.colors.dark.error.alertBg,
+                'dark-error-contrast': designTokens.colors.dark.error.contrast,
                 // light: warning colors
                 'light-warning-main': designTokens.colors.light.warning.main,
                 'light-warning-dark': designTokens.colors.light.warning.dark,
                 'light-warning-light': designTokens.colors.light.warning.light,
                 'light-warning-alertBg': designTokens.colors.light.warning.alertBg,
+                'light-warning-contrast': designTokens.colors.light.warning.contrast,
                 // dark: warning colors
                 'dark-warning-main': designTokens.colors.dark.warning.main,
                 'dark-warning-dark': designTokens.colors.dark.warning.dark,
                 'dark-warning-light': designTokens.colors.dark.warning.light,
                 'dark-warning-alertBg': designTokens.colors.dark.warning.alertBg,
+                'dark-warning-contrast': designTokens.colors.dark.warning.contrast,
                 // light: info colors
                 'light-info-main': designTokens.colors.light.info.main,
                 'light-info-dark': designTokens.colors.light.info.dark,
                 'light-info-light': designTokens.colors.light.info.light,
                 'light-info-alertBg': designTokens.colors.light.info.alertBg,
+                'light-info-contrast': designTokens.colors.light.info.contrast,
                 // dark: info colors
                 'dark-info-main': designTokens.colors.dark.info.main,
                 'dark-info-dark': designTokens.colors.dark.info.dark,
                 'dark-info-light': designTokens.colors.dark.info.light,
                 'dark-info-alertBg': designTokens.colors.dark.info.alertBg,
+                'dark-info-contrast': designTokens.colors.dark.info.contrast,
                 // light: success colors
                 'light-success-main': designTokens.colors.light.success.main,
                 'light-success-dark': designTokens.colors.light.success.dark,
                 'light-success-light': designTokens.colors.light.success.light,
                 'light-success-alertBg': designTokens.colors.light.success.alertBg,
+                'light-success-contrast': designTokens.colors.light.success.contrast,
                 // dark: success colors
                 'dark-success-main': designTokens.colors.dark.success.main,
                 'dark-success-dark': designTokens.colors.dark.success.dark,
                 'dark-success-light': designTokens.colors.dark.success.light,
                 'dark-success-alertBg': designTokens.colors.dark.success.alertBg,
+                'dark-success-contrast': designTokens.colors.dark.success.contrast,
                 // Light: background colors
                 'light-background-default': designTokens.colors.light.background.default,
                 'light-background-accent100': designTokens.colors.light.background.accent100,
@@ -129,8 +137,10 @@ var config = {
                 'dark-actionOutlinedBorder-disabled': designTokens.colors.dark.actionOutlinedBorder.disabled,
                 // misc light colors
                 'light-misc-divider': designTokens.colors.light.misc.divider,
+                'light-misc-scrim': designTokens.colors.light.misc.scrim,
                 // misc dark colors
                 'dark-misc-divider': designTokens.colors.dark.misc.divider,
+                'dark-misc-scrim': designTokens.colors.dark.misc.scrim,
                 'dark-misc-scrollbar-bg': designTokens.colors.dark.background.default,
                 'dark-misc-scrollbar-thumb': designTokens.colors.dark.background.accent200,
             },