@infonomic/uikit 2.15.0 → 3.1.0

package/src/widgets/drawer/drawer.module.css

@@ -19,7 +19,7 @@
     position: absolute;
     right: 0;
     height: 100%;
-    background-color: var(--canvas-25);
+    background-color: var(--surface-panel);
     box-shadow: var(--shadow-md);
     z-index: inherit;
   }
@@ -28,10 +28,6 @@
     animation: slideIn 150ms cubic-bezier(0.16, 1, 0.3, 1);
   }
 
-  .drawer-container:is(:global(.dark) *) {
-    background: var(--canvas-800);
-  }
-
   .drawer-depth-0.drawer-medium .drawer-container,
   .drawer-depth-0.drawer-wide .drawer-container {
     width: 90%;

package/src/widgets/drawer/drawer.stories.tsx

@@ -16,19 +16,8 @@ export default {
 export const Default = (): React.JSX.Element => {
   const [isOpen, setIsOpen] = React.useState(false)
 
-  const whiteIcon = `
-    .white-icon {
-      fill: white;  
-    }
-
-    .dark .white-icon {
-      fill: black;
-    }
-  `
-
   return (
     <>
-      <style>{whiteIcon}</style>
       <Button
         onClick={() => {
           setIsOpen(true)
@@ -54,7 +43,7 @@ export const Default = (): React.JSX.Element => {
                 setIsOpen(false)
               }}
             >
-              <CloseIcon width="14px" height="14px" svgClassName="white-icon" />
+              <CloseIcon width="14px" height="14px" />
             </IconButton>
           </Drawer.TopActions>
           <Drawer.Header className="flex items-center justify-between mb-4">
@@ -69,22 +58,11 @@ export const Default = (): React.JSX.Element => {
   )
 }
 
-const whiteIcon = `
-.white-icon {
-  fill: white;  
-}
-
-.dark .white-icon {
-  fill: black;
-}
-`
-
 export const Wide = (): React.JSX.Element => {
   const [isOpen, setIsOpen] = React.useState(false)
 
   return (
     <>
-      <style>{whiteIcon}</style>
       <Button
         onClick={() => {
           setIsOpen(true)
@@ -130,19 +108,8 @@ export const Nested = (): React.JSX.Element => {
   const [isOpen1, setIsOpen1] = React.useState(false)
   const [isOpen2, setIsOpen2] = React.useState(false)
 
-  const whiteIcon = `
-    .white-icon {
-      fill: white;  
-    }
-
-    .dark .white-icon {
-      fill: black;
-    }
-  `
-
   return (
     <>
-      <style>{whiteIcon}</style>
       <Button
         onClick={() => {
           setIsOpen1(true)

package/src/widgets/modal/modal.module.css

@@ -26,16 +26,12 @@
     max-height: 88vh;
     width: 100%;
     bottom: 0;
-    background-color: var(--canvas-25);
+    background-color: var(--surface-panel);
     border: 1px solid var(--border-color);
     margin-left: var(--spacing-2);
     margin-right: var(--spacing-2);
   }
 
-  .modal-container:is(:global(.dark) *) {
-    background: var(--canvas-800);
-  }
-
   @media screen and (min-width: 640px) {
     .modal-container {
       max-height: calc(100vh - 24px);

package/src/{components → widgets}/timeline/timeline.stories.tsx

@@ -9,13 +9,13 @@ const meta: Meta = {
    * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
-  title: 'Components',
+  title: 'Widgets/Timeline',
   component: TimelineComponent,
 }
 
 export default meta
 
-export const Timeline = (): React.JSX.Element => (
+export const Default = (): React.JSX.Element => (
   <div
     style={{
       maxWidth: '400px',

package/dist/components/timeline/timeline.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"timeline.d.ts","sourceRoot":"","sources":["../../../src/components/timeline/timeline.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,MAAM,WAAW,aAAa;IAC5B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,eAAO,MAAM,QAAQ;2CAKlB,aAAa,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;mDAmBjC,SAAS,GAAG;QACb,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;KACnC;mDAoBE,SAAS,GAAG;QACb,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;KACnC;mDAmBE,SAAS,GAAG;QACb,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;KACnC;sDA0BE,YAAY,GAAG;QAChB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;KACtC;mDAuBE,SAAS,GAAG;QACb,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;KACnC;sDAmBE,YAAY,GAAG;QAChB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;KACtC;CApIA,CAAA;AAGD,KAAK,WAAW,GAAG,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;AAC3C,KAAK,kBAAkB,GAAG,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,CAAA;AAC9D,UAAU,SAAU,SAAQ,kBAAkB;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAkBD,KAAK,WAAW,GAAG,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;AAC3C,KAAK,kBAAkB,GAAG,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,CAAA;AAC9D,UAAU,SAAU,SAAQ,kBAAkB;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAiBD,KAAK,WAAW,GAAG,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,CAAA;AAC7C,KAAK,kBAAkB,GAAG,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC,CAAA;AAChE,UAAU,SAAU,SAAQ,kBAAkB;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAwBD,KAAK,cAAc,GAAG,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;AAC9C,KAAK,qBAAqB,GAAG,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,CAAA;AACjE,UAAU,YAAa,SAAQ,qBAAqB;IAClD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAqBD,KAAK,WAAW,GAAG,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,CAAA;AAC7C,KAAK,kBAAkB,GAAG,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC,CAAA;AAChE,UAAU,SAAU,SAAQ,kBAAkB;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAiBD,KAAK,cAAc,GAAG,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAA;AAC7C,KAAK,qBAAqB,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAA;AAClE,UAAU,YAAa,SAAQ,qBAAqB;IAClD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB"}

package/dist/components/timeline/timeline.module.js

@@ -1,17 +0,0 @@
-import "./timeline_module.css";
-const timeline_module = {
-    timeline: "timeline-witEMC",
-    "timeline-root": "timeline-root-EL5aTZ",
-    timelineRoot: "timeline-root-EL5aTZ",
-    "timeline-item": "timeline-item-WlVGZ9",
-    timelineItem: "timeline-item-WlVGZ9",
-    "timeline-icon": "timeline-icon-QQoRLJ",
-    timelineIcon: "timeline-icon-QQoRLJ",
-    "timeline-heading": "timeline-heading-hkww5U",
-    timelineHeading: "timeline-heading-hkww5U",
-    "timeline-date": "timeline-date-YOt1ZT",
-    timelineDate: "timeline-date-YOt1ZT",
-    "timeline-content": "timeline-content-_pR_C5",
-    timelineContent: "timeline-content-_pR_C5"
-};
-export { timeline_module as default };