@scattered-light/loomiere-base-ui 0.3.0 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/design-system/components/Accordion/README.md +1 -1
- package/dist/design-system/components/Accordion/preview.html +1 -1
- package/dist/design-system/components/AlertDialog/preview.html +1 -1
- package/dist/design-system/components/Autocomplete/preview.html +1 -1
- package/dist/design-system/components/Avatar/README.md +1 -1
- package/dist/design-system/components/Avatar/preview.html +1 -1
- package/dist/design-system/components/Button/preview.html +3 -3
- package/dist/design-system/components/Checkbox/preview.html +1 -1
- package/dist/design-system/components/CheckboxGroup/preview.html +1 -1
- package/dist/design-system/components/Collapsible/preview.html +1 -1
- package/dist/design-system/components/Combobox/preview.html +1 -1
- package/dist/design-system/components/ContextMenu/preview.html +1 -1
- package/dist/design-system/components/Dialog/README.md +1 -1
- package/dist/design-system/components/Dialog/preview.html +1 -1
- package/dist/design-system/components/Drawer/preview.html +1 -1
- package/dist/design-system/components/Field/preview.html +1 -1
- package/dist/design-system/components/Fieldset/preview.html +1 -1
- package/dist/design-system/components/Form/preview.html +1 -1
- package/dist/design-system/components/Input/preview.html +1 -1
- package/dist/design-system/components/Menu/preview.html +1 -1
- package/dist/design-system/components/Menubar/preview.html +1 -1
- package/dist/design-system/components/Meter/preview.html +1 -1
- package/dist/design-system/components/NavigationMenu/preview.html +1 -1
- package/dist/design-system/components/NumberField/preview.html +1 -1
- package/dist/design-system/components/OTPField/preview.html +1 -1
- package/dist/design-system/components/Popover/preview.html +1 -1
- package/dist/design-system/components/PreviewCard/README.md +1 -1
- package/dist/design-system/components/PreviewCard/preview.html +1 -1
- package/dist/design-system/components/Progress/preview.html +1 -1
- package/dist/design-system/components/Radio/preview.html +1 -1
- package/dist/design-system/components/ScrollArea/preview.html +1 -1
- package/dist/design-system/components/Select/preview.html +1 -1
- package/dist/design-system/components/Separator/preview.html +1 -1
- package/dist/design-system/components/Slider/preview.html +1 -1
- package/dist/design-system/components/Switch/preview.html +1 -1
- package/dist/design-system/components/Table/README.md +50 -0
- package/dist/design-system/components/Table/preview.html +19 -0
- package/dist/design-system/components/Tabs/preview.html +1 -1
- package/dist/design-system/components/Toast/preview.html +1 -1
- package/dist/design-system/components/Toggle/README.md +1 -1
- package/dist/design-system/components/Toggle/preview.html +1 -1
- package/dist/design-system/components/ToggleGroup/preview.html +1 -1
- package/dist/design-system/components/Toolbar/preview.html +1 -1
- package/dist/design-system/components/Tooltip/preview.html +1 -1
- package/dist/design-system/components/bundle.js +5 -5
- package/dist/design-system/components/index.d.ts +1 -11
- package/dist/design-system/components/styles.css +659 -589
- package/dist/index.d.ts +1 -11
- package/dist/index.js +27 -31
- package/dist/index.js.map +1 -1
- package/dist/styles/components/Accordion.css +12 -12
- package/dist/styles/components/AlertDialog.css +1 -1
- package/dist/styles/components/Autocomplete.css +22 -22
- package/dist/styles/components/Avatar.css +15 -42
- package/dist/styles/components/Button.css +21 -21
- package/dist/styles/components/Checkbox.css +16 -16
- package/dist/styles/components/CheckboxGroup.css +1 -1
- package/dist/styles/components/Collapsible.css +16 -16
- package/dist/styles/components/Combobox.css +62 -62
- package/dist/styles/components/ContextMenu.css +12 -12
- package/dist/styles/components/Dialog.css +12 -12
- package/dist/styles/components/Drawer.css +11 -11
- package/dist/styles/components/Field.css +16 -16
- package/dist/styles/components/Fieldset.css +11 -11
- package/dist/styles/components/Form.css +1 -1
- package/dist/styles/components/Input.css +21 -21
- package/dist/styles/components/Menu.css +12 -12
- package/dist/styles/components/Menubar.css +17 -17
- package/dist/styles/components/Meter.css +11 -11
- package/dist/styles/components/NavigationMenu.css +22 -22
- package/dist/styles/components/NumberField.css +1 -1
- package/dist/styles/components/OTPField.css +11 -11
- package/dist/styles/components/Popover.css +11 -11
- package/dist/styles/components/PreviewCard.css +12 -12
- package/dist/styles/components/Progress.css +11 -11
- package/dist/styles/components/Radio.css +16 -16
- package/dist/styles/components/ScrollArea.css +1 -1
- package/dist/styles/components/Select.css +22 -22
- package/dist/styles/components/Separator.css +1 -1
- package/dist/styles/components/Slider.css +11 -11
- package/dist/styles/components/Switch.css +22 -22
- package/dist/styles/components/Table.css +144 -0
- package/dist/styles/components/Tabs.css +31 -31
- package/dist/styles/components/Toast.css +11 -11
- package/dist/styles/components/Toggle.css +24 -22
- package/dist/styles/components/ToggleGroup.css +1 -1
- package/dist/styles/components/Toolbar.css +6 -6
- package/dist/styles/components/Tooltip.css +6 -6
- package/dist/styles/index.css +2 -2
- package/dist/styles/reset/accessibility.css +1 -1
- package/dist/styles/reset/reset-accessibility.css +1 -1
- package/dist/styles/reset/reset-tailwind.css +1 -1
- package/dist/styles/reset/reset.css +1 -1
- package/dist/styles/tailwind.css +2 -2
- package/package.json +2 -2
- package/dist/design-system/components/IconButton/README.md +0 -31
- package/dist/design-system/components/IconButton/preview.html +0 -19
- package/dist/styles/components/IconButton.css +0 -49
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Accordion
|
|
2
2
|
|
|
3
|
-
The Base UI Accordion styled by the theme. No component tokens. Hover, press, chevron, divider and motion are the disclosure concept (tokens/semantic/disclosure.json); the trigger is the
|
|
3
|
+
The Base UI Accordion styled by the theme. No component tokens. Hover, press, chevron, divider and motion are the disclosure concept (tokens/semantic/disclosure.json); the trigger is the title-base heading and the panel is base text. The accordion sits on whatever surface holds it.
|
|
4
4
|
|
|
5
5
|
Use `Loomiere.Accordion` (`import { Accordion } from '@base-ui/react/accordion'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
|
|
6
6
|
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Avatar
|
|
2
2
|
|
|
3
|
-
The Base UI Avatar styled by the theme. A round picture with a ring in the page color, so avatars in a group cut out of each other in both themes. Initials
|
|
3
|
+
The Base UI Avatar styled by the theme. A round picture with a ring in the page color, so avatars in a group cut out of each other in both themes. Initials paint with the avatar's emphasis level (bold unless data-emphasis says otherwise), so data-color re-colors them and the brand's ladder sets how loud they are. Initials use the heading text style one tier per size. Only the sizes are avatar tokens.
|
|
4
4
|
|
|
5
5
|
Use `Loomiere.Avatar` (`import { Avatar } from '@base-ui/react/avatar'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
|
|
6
6
|
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -6,17 +6,17 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
13
13
|
<div id="root"></div>
|
|
14
14
|
<script>
|
|
15
|
-
(()=>{var
|
|
15
|
+
(()=>{var v=Object.create;var p=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var B=(e,a)=>()=>(a||e((a={exports:{}}).exports,a),a.exports),S=(e,a)=>{for(var n in a)p(e,n,{get:a[n],enumerable:!0})},E=(e,a,n,s)=>{if(a&&typeof a=="object"||typeof a=="function")for(let r of f(a))!w.call(e,r)&&r!==n&&p(e,r,{get:()=>a[r],enumerable:!(s=g(a,r))||s.enumerable});return e};var I=(e,a,n)=>(n=e!=null?v(h(e)):{},E(a||!e||!e.__esModule?p(n,"default",{value:e,enumerable:!0}):n,e));var m=B((q,c)=>{c.exports=window.Loomiere});var y={};S(y,{Default:()=>A,Disabled:()=>O,Emphasis:()=>k,IconOnly:()=>W,Loading:()=>M,QuietIconOnly:()=>L,Sizes:()=>D,Variants:()=>R,WithIcon:()=>C,default:()=>u});var o=I(m(),1);var d=window.React;function t(e,a,n){let{children:s,...r}=a||{};return n!==void 0&&(r.key=n),s===void 0?d.createElement(e,r):Array.isArray(s)?d.createElement(e,r,...s):d.createElement(e,r,s)}var F=d.Fragment;var z={title:"Components/Lib/Button",component:o.Button,parameters:{layout:"centered"},tags:["autodocs","ds:lib"],argTypes:{children:{control:"text",description:"Button content"}}},u=z,l=e=>t("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor",width:"20",height:"20",...e,children:t("path",{d:"M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z"})}),A={render:()=>t(o.Button,{type:"button",children:"Button"})},R={render:()=>t("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap"},children:[t(o.Button,{type:"button",children:"Default"}),t(o.Button,{type:"button","data-variant":"outline",children:"Outline"}),t(o.Button,{type:"button","data-variant":"ghost",children:"Ghost"})]})},D={render:()=>t("div",{style:{display:"flex",gap:"12px",alignItems:"center",flexWrap:"wrap"},children:[t(o.Button,{type:"button","data-size":"xs",children:"Extra Small"}),t(o.Button,{type:"button","data-size":"sm",children:"Small"}),t(o.Button,{type:"button","data-size":"md",children:"Medium"}),t(o.Button,{type:"button","data-size":"lg",children:"Large"})]})},C={render:()=>t("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap"},children:[t(o.Button,{type:"button",children:[t(l,{}),"Add Item"]}),t(o.Button,{type:"button","data-variant":"outline",children:[t(l,{}),"Add Item"]}),t(o.Button,{type:"button","data-variant":"ghost",children:[t(l,{}),"Add Item"]})]})},W={render:()=>t("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap"},children:[t(o.Button,{type:"button","aria-label":"Add item",children:t(l,{})}),t(o.Button,{type:"button","data-variant":"outline","aria-label":"Add item",children:t(l,{})}),t(o.Button,{type:"button","data-variant":"ghost","aria-label":"Add item",children:t(l,{})})]})},x=({flip:e,...a})=>t("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor",width:"20",height:"20",style:e?{transform:"scaleX(-1)"}:void 0,...a,children:t("path",{d:"M7.2 14.8a.75.75 0 010-1.06L10.94 10 7.2 6.26a.75.75 0 011.06-1.06l4.27 4.27a.75.75 0 010 1.06L8.26 14.8a.75.75 0 01-1.06 0z"})}),L={render:()=>t("div",{style:{display:"flex",alignItems:"center",gap:"var(--sl-space-2)",width:"280px"},children:[t(o.Button,{type:"button",emphasis:"quiet",palette:"neutral","data-size":"xs","aria-label":"Previous month",children:t(x,{flip:!0})}),t("span",{className:"text-style-subtitle-base",style:{flexGrow:1,textAlign:"center"},children:"October 2026"}),t(o.Button,{type:"button",emphasis:"quiet",palette:"neutral","data-size":"xs","aria-label":"Next month",children:t(x,{})})]})},O={render:()=>t("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap"},children:[t(o.Button,{type:"button",disabled:!0,children:"Disabled"}),t(o.Button,{type:"button","data-variant":"outline",disabled:!0,children:"Disabled"}),t(o.Button,{type:"button","data-variant":"ghost",disabled:!0,children:"Disabled"})]})},M={render:()=>t("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap"},children:[t(o.Button,{type:"button",disabled:!0,children:[t("span",{style:{width:"16px",height:"16px",border:"2px solid currentColor",borderTopColor:"transparent",borderRadius:"50%",animation:"spin 0.6s linear infinite"}}),"Loading..."]}),t("style",{children:`
|
|
16
16
|
@keyframes spin {
|
|
17
17
|
to { transform: rotate(360deg); }
|
|
18
18
|
}
|
|
19
|
-
`})]})},
|
|
19
|
+
`})]})},k={render:()=>t("div",{style:{display:"grid",gap:"var(--sl-space-3)"},children:[void 0,"secondary","error"].map(e=>t("div",{style:{display:"flex",gap:"var(--sl-space-2)"},children:["bold","standard","subtle","quiet"].map(a=>t(o.Button,{type:"button",emphasis:a,palette:e,children:e?`${a} ${e}`:a},a))},e??"default"))})};var i=window.React,b=u||{},N=["Default","Variants","Sizes","WithIcon"];function j({id:e}){let a=y[e],n={...b.args||{},...a.args||{}};return(a.render||(r=>i.createElement(b.component,r)))(n,{args:n,id:e,name:e})}var P=N.map(e=>i.createElement("section",{key:e,className:"ds-story"},i.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),i.createElement("div",{className:"ds-story-body"},i.createElement(j,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(i.createElement(i.Fragment,null,P));})();
|
|
20
20
|
|
|
21
21
|
</script>
|
|
22
22
|
</body>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Dialog
|
|
2
2
|
|
|
3
|
-
The Base UI Dialog styled by the theme. Both are centered modals built from the modal concept (tokens/semantic/modal.json): the modal-surface and modal-backdrop patterns, the
|
|
3
|
+
The Base UI Dialog styled by the theme. Both are centered modals built from the modal concept (tokens/semantic/modal.json): the modal-surface and modal-backdrop patterns, the title-amplify heading and base description. Alert dialog shares every rule here; AlertDialog.css adds nothing of its own. Action buttons are plain .Button elements, so they follow the emphasis levels.
|
|
4
4
|
|
|
5
5
|
Use `Loomiere.Dialog` (`import { Dialog } from '@base-ui/react/dialog'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
|
|
6
6
|
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# PreviewCard
|
|
2
2
|
|
|
3
|
-
The Base UI PreviewCard styled by the theme. The popup concept (surface, arrow, motion) with a
|
|
3
|
+
The Base UI PreviewCard styled by the theme. The popup concept (surface, arrow, motion) with a title-magnify title and condense description. Only its min and max width are its own (tokens/component/preview-card.json).
|
|
4
4
|
|
|
5
5
|
Use `Loomiere.PreviewCard` (`import { PreviewCard } from '@base-ui/react/preview-card'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
|
|
6
6
|
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
# Table
|
|
2
|
+
|
|
3
|
+
Plain HTML styled by the theme. Base UI has no table, so this styles the native <table class="Table"> elements with the table concept (tokens/semantic/table.json), the same tokens the AG Grid themes read: a small hand-built table and a full grid look alike. Rows answer to aria-selected="true" (or data-selected) for selection; cells take data-align="end" for numbers.
|
|
4
|
+
|
|
5
|
+
Base UI has no Table: use the native element with the class below (`<table className="Table">`).
|
|
6
|
+
|
|
7
|
+
Tokens: the table concept (--sl-table-*).
|
|
8
|
+
|
|
9
|
+
## Classes
|
|
10
|
+
|
|
11
|
+
| Class | Data attributes it answers to |
|
|
12
|
+
|---|---|
|
|
13
|
+
| `Table` | `data-sticky-header` |
|
|
14
|
+
|
|
15
|
+
Base UI sets the state attributes (`data-checked`, `data-open`, `data-disabled`...) itself. Set `data-size`, `data-emphasis`, `data-variant` and `data-color` yourself; `data-color` takes any palette name (`primary`, `secondary`, `error`...) and repaints the part in it.
|
|
16
|
+
|
|
17
|
+
## Example
|
|
18
|
+
|
|
19
|
+
From the Table stories (`Default`):
|
|
20
|
+
|
|
21
|
+
```tsx
|
|
22
|
+
export const Default: Story = {
|
|
23
|
+
render: () => (
|
|
24
|
+
<table className="Table">
|
|
25
|
+
<thead>
|
|
26
|
+
<tr>
|
|
27
|
+
<th scope="col">Site</th>
|
|
28
|
+
<th scope="col">Park</th>
|
|
29
|
+
<th scope="col" data-align="end">
|
|
30
|
+
Nights
|
|
31
|
+
</th>
|
|
32
|
+
<th scope="col">Status</th>
|
|
33
|
+
</tr>
|
|
34
|
+
</thead>
|
|
35
|
+
<tbody>
|
|
36
|
+
{trips.map((t) => (
|
|
37
|
+
<tr key={t.site}>
|
|
38
|
+
<td>{t.site}</td>
|
|
39
|
+
<td data-subtle="">{t.park}</td>
|
|
40
|
+
<td data-align="end">{t.nights}</td>
|
|
41
|
+
<td>{t.status}</td>
|
|
42
|
+
</tr>
|
|
43
|
+
))}
|
|
44
|
+
</tbody>
|
|
45
|
+
</table>
|
|
46
|
+
),
|
|
47
|
+
};
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
The preview also shows `SortableAndSelected`, `Empty`.
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<!-- @dsCard group="Display" height=360 subtitle="Default / SortableAndSelected / Empty" -->
|
|
2
|
+
<!doctype html>
|
|
3
|
+
<html>
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="utf-8">
|
|
6
|
+
<style>
|
|
7
|
+
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
|
+
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
|
+
</style>
|
|
11
|
+
</head>
|
|
12
|
+
<body>
|
|
13
|
+
<div id="root"></div>
|
|
14
|
+
<script>
|
|
15
|
+
(()=>{var p=Object.defineProperty;var m=(e,a)=>{for(var o in a)p(e,o,{get:a[o],enumerable:!0})};var i={};m(i,{Default:()=>u,Empty:()=>b,SortableAndSelected:()=>g,default:()=>l});var d=window.React;function t(e,a,o){let{children:n,...r}=a||{};return o!==void 0&&(r.key=o),n===void 0?d.createElement(e,r):Array.isArray(n)?d.createElement(e,r,...n):d.createElement(e,r,n)}var N=d.Fragment;var y={title:"Components/Table",parameters:{layout:"padded"},tags:["autodocs"]},l=y,c=[{site:"Jumbo Rocks 42",park:"Joshua Tree",nights:3,status:"Booked"},{site:"Hole-in-the-Wall 7",park:"Mojave Preserve",nights:2,status:"Waitlist"},{site:"Furnace Creek 118",park:"Death Valley",nights:4,status:"Booked"},{site:"Cottonwood 15",park:"Joshua Tree",nights:1,status:"Cancelled"}],u={render:()=>t("table",{className:"Table",children:[t("thead",{children:t("tr",{children:[t("th",{scope:"col",children:"Site"}),t("th",{scope:"col",children:"Park"}),t("th",{scope:"col","data-align":"end",children:"Nights"}),t("th",{scope:"col",children:"Status"})]})}),t("tbody",{children:c.map(e=>t("tr",{children:[t("td",{children:e.site}),t("td",{"data-subtle":"",children:e.park}),t("td",{"data-align":"end",children:e.nights}),t("td",{children:e.status})]},e.site))})]})},g={render:()=>t("table",{className:"Table",children:[t("caption",{children:"Sorted by nights. Hover a header to sort by it."}),t("thead",{children:t("tr",{children:[t("th",{scope:"col","aria-sort":"none",children:"Site"}),t("th",{scope:"col","aria-sort":"none",children:"Park"}),t("th",{scope:"col","aria-sort":"descending","data-align":"end",children:"Nights"}),t("th",{scope:"col",children:"Status"})]})}),t("tbody",{children:[...c].sort((e,a)=>a.nights-e.nights).map((e,a)=>t("tr",{"aria-selected":a===1?"true":void 0,children:[t("td",{children:e.site}),t("td",{"data-subtle":"",children:e.park}),t("td",{"data-align":"end",children:e.nights}),t("td",{children:e.status})]},e.site))}),t("tfoot",{children:t("tr",{children:[t("td",{colSpan:2,children:"Total"}),t("td",{"data-align":"end",children:c.reduce((e,a)=>e+a.nights,0)}),t("td",{})]})})]})},b={render:()=>t("table",{className:"Table",children:[t("thead",{children:t("tr",{children:[t("th",{scope:"col",children:"Site"}),t("th",{scope:"col",children:"Park"}),t("th",{scope:"col","data-align":"end",children:"Nights"})]})}),t("tbody",{children:t("tr",{children:t("td",{colSpan:3,"data-empty":"",children:"No trips yet"})})})]})};var s=window.React,h=l||{},S=["Default","SortableAndSelected","Empty"];function k({id:e}){let a=i[e],o={...h.args||{},...a.args||{}};return(a.render||(r=>s.createElement(h.component,r)))(o,{args:o,id:e,name:e})}var f=S.map(e=>s.createElement("section",{key:e,className:"ds-story"},s.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),s.createElement("div",{className:"ds-story-body"},s.createElement(k,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(s.createElement(s.Fragment,null,f));})();
|
|
16
|
+
|
|
17
|
+
</script>
|
|
18
|
+
</body>
|
|
19
|
+
</html>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Toggle
|
|
2
2
|
|
|
3
|
-
The Base UI Toggle styled by the theme. A toggle is a button that stays pressed: the same heights, padding, gap and trigger text style as a button of the same size.
|
|
3
|
+
The Base UI Toggle styled by the theme. A toggle is a button that stays pressed: the same heights, padding, gap and trigger text style as a button of the same size. Pressed, it takes its emphasis level's pressed look (standard unless data-emphasis on it or its group says otherwise), so the brand's emphasis ladder decides how loud an "on" toggle is.
|
|
4
4
|
|
|
5
5
|
Use `Loomiere.Toggle` (`import { Toggle } from '@base-ui/react/toggle'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
|
|
6
6
|
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<style>
|
|
7
7
|
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
8
|
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
-
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
10
|
</style>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|