@infonomic/uikit 2.14.0 → 3.0.0

package/src/components/badge/badge.module.css

@@ -1,83 +1,53 @@
-.badge {
-  display: inline-block;
-  padding: 0.25em 0.4em;
-  font-size: var(--font-size-sm);
-  font-weight: 400;
-  line-height: 1;
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: baseline;
-  border-radius: var(--border-radius-sm);
-}
-
-.primary {
-  color: white;
-  background-color: var(--primary-500);
-}
-
-.secondary {
-  color: black;
-  background-color: var(--secondary-500);
-}
-
-.noeffect {
- color: black;
-  background-color: var(--gray-100);
-}
-
-.success {
-  color: white;
-  background-color: var(--green-500);
-}
-
-.info {
- color: white;
-  background-color: var(--blue-300);
-}
-
-.warning {
-  color: var(--foreground);
-  background-color: var(--yellow-300);
-}
-
-.danger {
-  color: white;
-  background-color: var(--red-500);
-}
+@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+
+@layer infonomic-components {
+  .badge {
+    display: inline-block;
+    padding: 0.25em 0.4em;
+    font-size: var(--font-size-sm);
+    font-weight: 400;
+    line-height: 1;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: baseline;
+    border-radius: var(--border-radius-sm);
+  }
 
-:global(.dark) {
-  .primary:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-    color: white;
-    background-color: var(--primary-400);
+  .primary {
+    color: var(--text-on-primary);
+    background-color: var(--fill-primary-strong);
   }
 
-  .secondary:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-    color: black;;
-    background-color: var(--secondary-400);
+  .secondary {
+    color: var(--text-on-secondary);
+    background-color: var(--fill-secondary-strong);
   }
 
-  .noeffect:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-   color: white;
-    background-color: var(--gray-700);
+  .noeffect {
+    color: var(--text-on-noeffect);
+    background-color: var(--fill-noeffect-strong);
   }
 
-  .success:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-   color: white;
-    background-color: var(--green-400);
+  .success {
+    color: var(--text-on-success);
+    background-color: var(--fill-success-strong);
   }
 
-  .info:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-   color: white;
-    background-color: var(--blue-400);
+  .info {
+    color: var(--text-on-info);
+    background-color: var(--fill-info-strong);
   }
 
-  .warning:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-    color: black;
-    background-color: var(--yellow-400);
+  .warning {
+    color: var(--text-on-warning);
+    background-color: var(--fill-warning-strong);
   }
 
-  .danger:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
-    color: white;
-    background-color: var(--red-400);
+  .danger {
+    color: var(--text-on-danger);
+    background-color: var(--fill-danger-strong);
   }
+
+  /* Dark mode - All intents now handled by semantic tokens in theme layer */
+  /* No overrides needed! Tokens automatically switch in .dark and respect .not-dark */
 }

package/src/components/button/button-intents.stories.tsx

@@ -34,7 +34,7 @@ const AllIntents = (): React.JSX.Element => {
   )
 }
 
-export const Intents: Story = {
+export const ButtonIntents: Story = {
   render: () => <AllIntents />,
 }
 

package/src/components/button/button-overrides.stories.tsx

@@ -0,0 +1,43 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import type React from 'react'
+
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { capitalize } from '../../utils/capitalize.js'
+
+import { size } from '../@types/shared.js'
+import { variant } from './@types/button.js'
+import { Button } from './button.js'
+
+type Story = StoryObj<typeof Button>
+
+const AllOverrides = (): React.JSX.Element => {
+  return (
+    <>
+      <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
+        <div style={{ width: '300px', padding: '1rem', borderRadius: '8px', border: '1px solid var(--stroke-primary)', backgroundColor: 'var(--gray-25)' }}>
+          <Button className="not-dark" variant="filled" size="sm" style={{ marginRight: '1rem' }}>Force Light</Button>
+        </div>
+      </div>
+      <div className="dark" style={{ maxWidth: '600px', margin: '2rem auto' }} >
+        <div style={{ width: '300px', padding: '1rem', borderRadius: '8px', border: '1px solid var(--stroke-primary)', backgroundColor: 'var(--canvas-800)' }}>
+          <Button variant="filled" size="sm" style={{ marginRight: '1rem' }}>Force Dark</Button>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export const ButtonOverrides: Story = {
+  render: () => <AllOverrides />,
+}
+
+const meta: Meta<typeof Button> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Components/Button',
+  component: Button,
+}
+
+export default meta

package/src/components/button/button-variants.stories.tsx

@@ -44,7 +44,7 @@ const AllVariants = (): React.JSX.Element => {
   )
 }
 
-export const Variants: Story = {
+export const ButtonVariants: Story = {
   render: () => <AllVariants />,
 }