@gtivr4/a1-design-system-react 0.14.0 → 0.18.0

package/src/components/tree-menu/TreeMenu.jsx

@@ -482,16 +482,20 @@ export function TreeMenu({
 
   if (!showExpandControls) return tree;
 
+  // One toggle: if anything is expanded, collapse everything; otherwise expand all.
+  const anyExpanded = expandedIds.size > 0;
+
   return (
     <div className="a1-tree-menu-root">
       <div className="a1-tree-menu__controls">
-        <button type="button" className="a1-tree-menu__control-btn" onClick={handleExpandAll}>
-          <Icon name="unfold_more" />
-          Expand all
-        </button>
-        <button type="button" className="a1-tree-menu__control-btn" onClick={handleCollapseAll}>
-          <Icon name="unfold_less" />
-          Collapse all
+        <button
+          type="button"
+          className="a1-tree-menu__control-btn"
+          aria-expanded={anyExpanded}
+          onClick={anyExpanded ? handleCollapseAll : handleExpandAll}
+        >
+          <Icon name={anyExpanded ? 'unfold_less' : 'unfold_more'} />
+          {anyExpanded ? 'Collapse all' : 'Expand all'}
         </button>
       </div>
       {tree}

package/src/index.d.ts

@@ -0,0 +1,71 @@
+// Aggregated type entry — generated to mirror index.js so TS consumers (and
+// design-sync) see the component exports. Regenerate if index.js changes.
+
+export { Accordion } from "./components/accordion/Accordion";
+export { ContextMenu } from "./components/context-menu/ContextMenu";
+export { TreeMenu } from "./components/tree-menu/TreeMenu";
+export { Calendar } from "./components/calendar/Calendar";
+export { PageNav } from "./components/page-nav/PageNav";
+export { Blockquote } from "./components/blockquote/Blockquote";
+export { Breadcrumb } from "./components/breadcrumb/Breadcrumb";
+export { Notification } from "./components/notification/Notification";
+export { Snackbar } from "./components/snackbar/Snackbar";
+export { StatusBar } from "./components/status-bar/StatusBar";
+export { CircularProgress } from "./components/circular-progress/CircularProgress";
+export { StepTracker } from "./components/step-tracker/StepTracker";
+export { Bleed } from "./components/bleed/Bleed";
+export { IconButton } from "./components/icon-button/IconButton";
+export { Button } from "./components/button/Button";
+export { SplitButton } from "./components/split-button/SplitButton";
+export { ButtonContainer } from "./components/button-container/ButtonContainer";
+export { Card } from "./components/card/Card";
+export { Cluster } from "./components/cluster/Cluster";
+export { Code } from "./components/code/Code";
+export { DefinitionList } from "./components/definition-list/DefinitionList";
+export { Dialog } from "./components/dialog/Dialog";
+export { Divider } from "./components/divider/Divider";
+export { InlineEditable } from "./components/inline-editable/InlineEditable";
+export { Heading, HeadingMark } from "./components/heading/Heading";
+export { List, ListItem } from "./components/list/List";
+export { Inset } from "./components/inset/Inset";
+export { Icon } from "./components/icon/Icon";
+export { Link } from "./components/link/Link";
+export { Paragraph } from "./components/paragraph/Paragraph";
+export { Banner } from "./components/banner/Banner";
+export { Fieldset } from "./components/fieldset/Fieldset";
+export { FieldRow } from "./components/field-row/FieldRow";
+export { TextField } from "./components/field/TextField";
+export { SelectField } from "./components/field/SelectField";
+export { Autocomplete } from "./components/autocomplete/Autocomplete";
+export { NumberField } from "./components/field/NumberField";
+export { TextareaField } from "./components/field/TextareaField";
+export { CheckboxGroup } from "./components/checkbox-group/CheckboxGroup";
+export { ChoiceGroup } from "./components/choice-group/ChoiceGroup";
+export { RadioGroup } from "./components/radio-group/RadioGroup";
+export { Switch } from "./components/switch/Switch";
+export { MessageBadge, MessageEmptyState } from "./components/message/Message";
+export { Pagination } from "./components/pagination/Pagination";
+export { SegmentedControl } from "./components/segmented-control/SegmentedControl";
+export { Slider } from "./components/slider/Slider";
+export {
+  Toolbar,
+  ToolbarToggle,
+  ToolbarButton,
+  ToolbarGroup,
+  ToolbarMenu,
+  ToolbarDivider,
+  TOOLBAR_NONE_ICON,
+} from "./components/toolbar/Toolbar.jsx";
+export { Tabs, TabList, Tab, TabPanel } from "./components/tabs/Tabs";
+export { Grid, GridItem } from "./components/grid/Grid";
+export { Inverse } from "./components/inverse/Inverse";
+export { Section } from "./components/section/Section";
+export { Stack } from "./components/stack/Stack";
+export { PageLayout } from "./components/page-layout/PageLayout";
+export { Menu, MenuSection, MenuItem } from "./components/menu/Menu";
+export { SideNav, SideNavItem, SideNavGroup } from "./components/side-nav/SideNav";
+export { BottomDrawer } from "./components/bottom-drawer/BottomDrawer";
+export { DataTable } from "./components/data-table/DataTable";
+export { Figure } from "./components/figure/Figure";
+export { Spacer } from "./components/spacer/Spacer";
+export { StickyActions } from "./components/sticky-actions/StickyActions";

package/src/index.js

@@ -12,7 +12,9 @@ export { CircularProgress } from "./components/circular-progress/CircularProgres
 export { StepTracker } from "./components/step-tracker/StepTracker.jsx";
 export { Bleed } from "./components/bleed/Bleed.jsx";
 export { IconButton } from "./components/icon-button/IconButton.jsx";
-export { Button } from "./components/button/Button.jsx";export { ButtonContainer } from "./components/button-container/ButtonContainer.jsx";
+export { Button } from "./components/button/Button.jsx";
+export { SplitButton } from "./components/split-button/SplitButton.jsx";
+export { ButtonContainer } from "./components/button-container/ButtonContainer.jsx";
 export { Card } from "./components/card/Card.jsx";
 export { Cluster } from "./components/cluster/Cluster.jsx";
 export { Code } from "./components/code/Code.jsx";
@@ -31,6 +33,7 @@ export { Fieldset } from "./components/fieldset/Fieldset.jsx";
 export { FieldRow } from "./components/field-row/FieldRow.jsx";
 export { TextField } from "./components/field/TextField.jsx";
 export { SelectField } from "./components/field/SelectField.jsx";
+export { Autocomplete } from "./components/autocomplete/Autocomplete.jsx";
 export { DateField } from "./components/field/DateField.jsx";
 export { PhoneField } from "./components/field/PhoneField.jsx";
 export { ZipField, ZIP_MASKS } from "./components/field/ZipField.jsx";
@@ -46,6 +49,16 @@ export { MessageBadge, MessageEmptyState } from "./components/message/Message.js
 
 export { Pagination } from "./components/pagination/Pagination.jsx";
 export { SegmentedControl } from "./components/segmented-control/SegmentedControl.jsx";
+export { Slider } from "./components/slider/Slider.jsx";
+export {
+  Toolbar,
+  ToolbarToggle,
+  ToolbarButton,
+  ToolbarGroup,
+  ToolbarMenu,
+  ToolbarDivider,
+  TOOLBAR_NONE_ICON,
+} from "./components/toolbar/Toolbar.jsx";
 export { Tabs, TabList, Tab, TabPanel } from "./components/tabs/Tabs.jsx";
 export { Grid, GridItem } from "./components/grid/Grid.jsx";
 export { Inverse } from "./components/inverse/Inverse.jsx";
@@ -57,6 +70,7 @@ export { Menu, MenuSection, MenuItem } from "./components/menu/Menu.jsx";
 export { SideNav, SideNavItem, SideNavGroup } from "./components/side-nav/SideNav.jsx";
 export { TokenSelect } from "./components/token-select/TokenSelect.jsx";
 export { BottomDrawer } from "./components/bottom-drawer/BottomDrawer.jsx";
+export { BottomSheet } from "./components/bottom-sheet/BottomSheet.jsx";
 export { TopHeader } from "./components/top-header/TopHeader.jsx";
 export { DataTable } from "./components/data-table/DataTable.jsx";
 export { DataTableFilters } from "./components/data-table/DataTableFilters.jsx";

package/src/themes.css

@@ -93,6 +93,152 @@ html.a1-theme-accessible.a1-theme-light, html.a1-theme-light.a1-theme-accessible
 }
 
 
+/* ────────────────────────────────────────────────────────────
+   Aperture
+   Modern, minimal, gallery-grade theme for a photography portfolio — near-monochrome graphite on clean whites (Apple + Audi inspired) so imagery dominates, with a refined Apple-blue info and Audi-red error. Type: an elegant script display (Pinyon Script), an editorial serif heading (Playfair Display), and a clean, slightly elegant sans body (Manrope). Apply class="a1-theme-aperture" to <html>.
+   ──────────────────────────────────────────────────────────── */
+
+html.a1-theme-aperture {
+  --base-color-accent-0: #FFFFFF;
+  --base-color-accent-50: #F5F5F7;
+  --base-color-accent-100: #E8E8ED;
+  --base-color-accent-200: #D2D2D7;
+  --base-color-accent-300: #AEAEB2;
+  --base-color-accent-400: #6E6E73;
+  --base-color-accent-500: #1D1D1F;
+  --base-color-accent-600: #161618;
+  --base-color-accent-700: #0F0F10;
+  --base-color-accent-800: #08080A;
+  --base-color-accent-900: #040405;
+  --base-color-accent-1000: #000000;
+  --base-color-info-0: #FBFDFF;
+  --base-color-info-50: #EAF3FE;
+  --base-color-info-100: #D2E6FD;
+  --base-color-info-200: #A6CCFB;
+  --base-color-info-300: #6FA8F6;
+  --base-color-info-400: #3D86EE;
+  --base-color-info-500: #0071E3;
+  --base-color-info-600: #005BBF;
+  --base-color-info-700: #00458F;
+  --base-color-info-800: #002E60;
+  --base-color-info-900: #001A37;
+  --base-color-info-1000: #000D1C;
+  --base-color-success-0: #F9FDFB;
+  --base-color-success-50: #ECF7F1;
+  --base-color-success-100: #D7EEE3;
+  --base-color-success-200: #B0DCC8;
+  --base-color-success-300: #82C5A8;
+  --base-color-success-400: #54A886;
+  --base-color-success-500: #2E8765;
+  --base-color-success-600: #246B50;
+  --base-color-success-700: #1B503C;
+  --base-color-success-800: #123528;
+  --base-color-success-900: #0A1F17;
+  --base-color-success-1000: #05100C;
+  --base-color-error-0: #FFFBFB;
+  --base-color-error-50: #FCECEE;
+  --base-color-error-100: #F8D6DB;
+  --base-color-error-200: #F0AEB7;
+  --base-color-error-300: #E47E8C;
+  --base-color-error-400: #D4536A;
+  --base-color-error-500: #BB0A30;
+  --base-color-error-600: #960826;
+  --base-color-error-700: #71061D;
+  --base-color-error-800: #4C0413;
+  --base-color-error-900: #2E020B;
+  --base-color-error-1000: #170105;
+  --base-color-warn-0: #FFFCF6;
+  --base-color-warn-50: #FBF2E1;
+  --base-color-warn-100: #F6E4C3;
+  --base-color-warn-200: #EECB8C;
+  --base-color-warn-300: #E0AD55;
+  --base-color-warn-400: #C68F35;
+  --base-color-warn-500: #9A6D1E;
+  --base-color-warn-600: #7B5718;
+  --base-color-warn-700: #5C4112;
+  --base-color-warn-800: #3D2C0C;
+  --base-color-warn-900: #251A07;
+  --base-color-warn-1000: #130D03;
+  --semantic-color-text-default: #1D1D1F;
+  --semantic-color-text-muted: #6E6E73;
+  --semantic-color-text-inverse: #FFFFFF;
+  --semantic-color-text-accent: var(--base-color-accent-600);
+  --semantic-color-surface-page: #FAFAFA;
+  --semantic-color-surface-card: #FFFFFF;
+  --semantic-color-surface-field: #FFFFFF;
+  --semantic-color-surface-panel: #FFFFFF;
+  --semantic-color-surface-raised: #F0F0F2;
+  --semantic-color-border-subtle: #EBEBED;
+  --semantic-color-border-default: #D2D2D7;
+  --semantic-color-border-strong: #AEAEB2;
+  --semantic-color-action-background: var(--base-color-accent-500);
+  --semantic-color-action-background-hover: var(--base-color-accent-600);
+  --semantic-color-action-background-pressed: var(--base-color-accent-700);
+  --semantic-color-action-foreground: var(--base-color-accent-0);
+  --semantic-color-action-foreground-pressed: var(--base-color-accent-100);
+  --semantic-color-action-surface: var(--base-color-accent-50);
+  --semantic-color-action-border: var(--base-color-accent-300);
+  --semantic-color-status-error-background: var(--base-color-error-500);
+  --semantic-color-status-error-surface: var(--base-color-error-50);
+  --semantic-color-status-error-border: var(--base-color-error-300);
+  --semantic-color-status-error-foreground: var(--base-color-error-0);
+  --semantic-color-status-warn-background: var(--base-color-warn-500);
+  --semantic-color-status-warn-surface: var(--base-color-warn-50);
+  --semantic-color-status-warn-border: var(--base-color-warn-300);
+  --semantic-color-status-warn-foreground: var(--base-color-warn-0);
+  --semantic-color-status-success-background: var(--base-color-success-500);
+  --semantic-color-status-success-surface: var(--base-color-success-50);
+  --semantic-color-status-success-border: var(--base-color-success-300);
+  --semantic-color-status-success-foreground: var(--base-color-success-0);
+  --semantic-color-status-info-background: var(--base-color-info-500);
+  --semantic-color-status-info-surface: var(--base-color-info-50);
+  --semantic-color-status-info-border: var(--base-color-info-300);
+  --semantic-color-status-info-foreground: var(--base-color-info-0);
+  --component-button-primary-background: var(--semantic-color-action-background);
+  --component-button-primary-background-hover: var(--semantic-color-action-background-hover);
+  --component-button-primary-background-pressed: var(--semantic-color-action-background-pressed);
+  --component-button-primary-foreground: var(--base-color-accent-0);
+  --component-button-primary-foreground-hover: var(--base-color-accent-50);
+  --component-button-primary-foreground-pressed: var(--base-color-accent-100);
+  --component-button-primary-border: var(--semantic-color-action-background);
+  --component-button-secondary-background: var(--base-color-accent-0);
+  --component-button-secondary-background-hover: var(--base-color-accent-50);
+  --component-button-secondary-background-pressed: var(--base-color-accent-100);
+  --component-button-secondary-foreground: var(--base-color-accent-600);
+  --component-button-secondary-foreground-hover: var(--base-color-accent-700);
+  --component-button-secondary-foreground-pressed: var(--base-color-accent-800);
+  --component-button-secondary-border: var(--base-color-accent-500);
+  --component-button-secondary-border-hover: var(--base-color-accent-700);
+  --component-button-secondary-border-pressed: var(--base-color-accent-800);
+  --component-button-tertiary-background: transparent;
+  --component-button-tertiary-background-hover: var(--base-color-accent-50);
+  --component-button-tertiary-background-pressed: var(--base-color-accent-100);
+  --component-button-tertiary-foreground: var(--base-color-accent-600);
+  --component-button-tertiary-foreground-hover: var(--base-color-accent-700);
+  --component-button-tertiary-foreground-pressed: var(--base-color-accent-800);
+  --component-button-tertiary-border: transparent;
+  --component-button-tertiary-border-hover: var(--base-color-accent-50);
+  --component-button-tertiary-border-pressed: var(--base-color-accent-100);
+  --component-button-focus-ring: var(--base-color-accent-300);
+  --base-radius-sm: 0.25rem;
+  --base-radius-md: 0.5rem;
+  --base-radius-lg: 0.625rem;
+  --base-radius-xl: 0.75rem;
+  --component-card-border-radius: 14px;
+  --component-dialog-border-radius: 16px;
+  --component-button-font-family: var(--theme-a1-aperture-font-family-body);
+  --component-paragraph-font-family: var(--theme-a1-aperture-font-family-body);
+  --component-heading-font-family-heading: var(--theme-a1-aperture-font-family-heading);
+  --component-heading-font-family-display: var(--theme-a1-aperture-font-family-display);
+  --semantic-font-weight-body: var(--theme-a1-aperture-font-weight-body);
+  --semantic-font-weight-heading: var(--theme-a1-aperture-font-weight-heading);
+  --semantic-font-weight-display: var(--theme-a1-aperture-font-weight-display);
+  --component-paragraph-font-weight: var(--theme-a1-aperture-font-weight-body);
+  --component-heading-font-weight-heading: var(--theme-a1-aperture-font-weight-heading);
+  --component-heading-font-weight-display: var(--theme-a1-aperture-font-weight-display);
+}
+
+
 /* ────────────────────────────────────────────────────────────
    CatLympics
    Playful, pastel, bouncy theme for CatLympics Game. Apply .a1-theme-catlympics to <html>.
@@ -293,6 +439,151 @@ html.a1-theme-catlympics.a1-theme-light, html.a1-theme-light.a1-theme-catlympics
 }
 
 
+/* ────────────────────────────────────────────────────────────
+   Crochet
+   A soft, cozy pastel theme — dusty-rose accents, sage / periwinkle / apricot pastels on warm cream surfaces, warm engaging serif (Fraunces) display & headings, and a slab-serif (Roboto Slab) body. Apply class="a1-theme-crochet" to <html>.
+   ──────────────────────────────────────────────────────────── */
+
+html.a1-theme-crochet {
+  --base-color-accent-0: #FFFBFD;
+  --base-color-accent-50: #FBEFF5;
+  --base-color-accent-100: #F5DEEA;
+  --base-color-accent-200: #ECC2D6;
+  --base-color-accent-300: #DE9DBA;
+  --base-color-accent-400: #C9779B;
+  --base-color-accent-500: #B0567F;
+  --base-color-accent-600: #8E4063;
+  --base-color-accent-700: #6B2F4A;
+  --base-color-accent-800: #481E31;
+  --base-color-accent-900: #2B121D;
+  --base-color-accent-1000: #160910;
+  --base-color-info-0: #FBFCFF;
+  --base-color-info-50: #EFF2FB;
+  --base-color-info-100: #DFE5F6;
+  --base-color-info-200: #C2CCEC;
+  --base-color-info-300: #9CACDE;
+  --base-color-info-400: #7488C9;
+  --base-color-info-500: #5E73B0;
+  --base-color-info-600: #46588E;
+  --base-color-info-700: #34426B;
+  --base-color-info-800: #232C48;
+  --base-color-info-900: #14192B;
+  --base-color-info-1000: #0A0D16;
+  --base-color-success-0: #F9FDFB;
+  --base-color-success-50: #ECF6F0;
+  --base-color-success-100: #D9ECE2;
+  --base-color-success-200: #B7DCC7;
+  --base-color-success-300: #8DC4A6;
+  --base-color-success-400: #63A883;
+  --base-color-success-500: #418062;
+  --base-color-success-600: #34664E;
+  --base-color-success-700: #264C3A;
+  --base-color-success-800: #193326;
+  --base-color-success-900: #0E1E16;
+  --base-color-success-1000: #07100B;
+  --base-color-error-0: #FFFBFB;
+  --base-color-error-50: #FCEEEE;
+  --base-color-error-100: #F8DCDC;
+  --base-color-error-200: #F0BCBC;
+  --base-color-error-300: #E49494;
+  --base-color-error-400: #D26F6F;
+  --base-color-error-500: #BB4F4F;
+  --base-color-error-600: #963E3E;
+  --base-color-error-700: #712F2F;
+  --base-color-error-800: #4C1F1F;
+  --base-color-error-900: #2E1313;
+  --base-color-error-1000: #170909;
+  --base-color-warn-0: #FFFCF7;
+  --base-color-warn-50: #FBF1E3;
+  --base-color-warn-100: #F6E2C6;
+  --base-color-warn-200: #EEC891;
+  --base-color-warn-300: #E0A95C;
+  --base-color-warn-400: #C68B3C;
+  --base-color-warn-500: #9C6824;
+  --base-color-warn-600: #7D531D;
+  --base-color-warn-700: #5E3E16;
+  --base-color-warn-800: #3F2A0F;
+  --base-color-warn-900: #261907;
+  --base-color-warn-1000: #130D04;
+  --semantic-color-text-default: #3B2F2C;
+  --semantic-color-text-muted: #6B5C55;
+  --semantic-color-text-inverse: #FFFFFF;
+  --semantic-color-text-accent: var(--base-color-accent-600);
+  --semantic-color-surface-page: #FAF4EF;
+  --semantic-color-surface-card: #FFFFFF;
+  --semantic-color-surface-field: #FFFFFF;
+  --semantic-color-surface-panel: #FFFDFB;
+  --semantic-color-surface-raised: #F6ECE4;
+  --semantic-color-border-subtle: #EFE0D6;
+  --semantic-color-border-default: #DDC8BB;
+  --semantic-color-border-strong: #BCA294;
+  --semantic-color-action-background: var(--base-color-accent-500);
+  --semantic-color-action-background-hover: var(--base-color-accent-600);
+  --semantic-color-action-background-pressed: var(--base-color-accent-700);
+  --semantic-color-action-foreground: var(--base-color-accent-0);
+  --semantic-color-action-foreground-pressed: var(--base-color-accent-100);
+  --semantic-color-action-surface: var(--base-color-accent-50);
+  --semantic-color-action-border: var(--base-color-accent-300);
+  --semantic-color-status-error-background: var(--base-color-error-500);
+  --semantic-color-status-error-surface: var(--base-color-error-50);
+  --semantic-color-status-error-border: var(--base-color-error-300);
+  --semantic-color-status-error-foreground: var(--base-color-error-0);
+  --semantic-color-status-warn-background: var(--base-color-warn-500);
+  --semantic-color-status-warn-surface: var(--base-color-warn-50);
+  --semantic-color-status-warn-border: var(--base-color-warn-300);
+  --semantic-color-status-warn-foreground: var(--base-color-warn-0);
+  --semantic-color-status-success-background: var(--base-color-success-500);
+  --semantic-color-status-success-surface: var(--base-color-success-50);
+  --semantic-color-status-success-border: var(--base-color-success-300);
+  --semantic-color-status-success-foreground: var(--base-color-success-0);
+  --semantic-color-status-info-background: var(--base-color-info-500);
+  --semantic-color-status-info-surface: var(--base-color-info-50);
+  --semantic-color-status-info-border: var(--base-color-info-300);
+  --semantic-color-status-info-foreground: var(--base-color-info-0);
+  --component-button-primary-background: var(--semantic-color-action-background);
+  --component-button-primary-background-hover: var(--semantic-color-action-background-hover);
+  --component-button-primary-background-pressed: var(--semantic-color-action-background-pressed);
+  --component-button-primary-foreground: var(--base-color-accent-0);
+  --component-button-primary-foreground-hover: var(--base-color-accent-50);
+  --component-button-primary-foreground-pressed: var(--base-color-accent-100);
+  --component-button-primary-border: var(--semantic-color-action-background);
+  --component-button-secondary-background: var(--base-color-accent-0);
+  --component-button-secondary-background-hover: var(--base-color-accent-50);
+  --component-button-secondary-background-pressed: var(--base-color-accent-100);
+  --component-button-secondary-foreground: var(--base-color-accent-600);
+  --component-button-secondary-foreground-hover: var(--base-color-accent-700);
+  --component-button-secondary-foreground-pressed: var(--base-color-accent-800);
+  --component-button-secondary-border: var(--base-color-accent-500);
+  --component-button-secondary-border-hover: var(--base-color-accent-700);
+  --component-button-secondary-border-pressed: var(--base-color-accent-800);
+  --component-button-tertiary-background: transparent;
+  --component-button-tertiary-background-hover: var(--base-color-accent-50);
+  --component-button-tertiary-background-pressed: var(--base-color-accent-100);
+  --component-button-tertiary-foreground: var(--base-color-accent-600);
+  --component-button-tertiary-foreground-hover: var(--base-color-accent-700);
+  --component-button-tertiary-foreground-pressed: var(--base-color-accent-800);
+  --component-button-tertiary-border: transparent;
+  --component-button-tertiary-border-hover: var(--base-color-accent-50);
+  --component-button-tertiary-border-pressed: var(--base-color-accent-100);
+  --component-button-focus-ring: var(--base-color-accent-300);
+  --base-radius-md: 0.625rem;
+  --base-radius-lg: 0.875rem;
+  --base-radius-xl: 14px;
+  --component-card-border-radius: 16px;
+  --component-dialog-border-radius: 16px;
+  --component-button-font-family: var(--theme-a1-crochet-font-family-body);
+  --component-paragraph-font-family: var(--theme-a1-crochet-font-family-body);
+  --component-heading-font-family-heading: var(--theme-a1-crochet-font-family-heading);
+  --component-heading-font-family-display: var(--theme-a1-crochet-font-family-display);
+  --semantic-font-weight-body: var(--theme-a1-crochet-font-weight-body);
+  --semantic-font-weight-heading: var(--theme-a1-crochet-font-weight-heading);
+  --semantic-font-weight-display: var(--theme-a1-crochet-font-weight-display);
+  --component-paragraph-font-weight: var(--theme-a1-crochet-font-weight-body);
+  --component-heading-font-weight-heading: var(--theme-a1-crochet-font-weight-heading);
+  --component-heading-font-weight-display: var(--theme-a1-crochet-font-weight-display);
+}
+
+
 /* ────────────────────────────────────────────────────────────
    Fresh
    A crisp, airy theme with sky-blue accents, Nunito body text (ExtraBold headings), Baskerville display typography, and a cool mint gradient background. Apply class="a1-theme-fresh" to <html>.
@@ -559,6 +850,8 @@ html.a1-theme-heritage {
   --component-button-tertiary-border-pressed: var(--base-color-accent-100);
   --component-button-focus-ring: var(--base-color-accent-300);
   --base-radius-control: 2px;
+  --base-radius-sm: 1px;
+  --base-radius-md: 2px;
   --base-radius-lg: 3px;
   --base-radius-xl: 4px;
   --component-button-border-radius: 2px;

package/src/tokens.css

@@ -109,7 +109,7 @@
   --base-space-button-focus-ring-width: 0.1875rem;
   --base-space-button-focus-ring-offset: 0.125rem;
   --base-space-button-disabled-opacity: 0.55;
-  --base-space-card-padding: 1.25rem;
+  --base-space-card-padding: 1rem;
   --base-space-card-border-width: 1px;
   --base-shadow-100: 0px 1px 2px 0px rgba(6, 11, 20, 0.05);
   --base-shadow-200: 0px 1px 3px 0px rgba(6, 11, 20, 0.10), 0px 1px 2px -1px rgba(6, 11, 20, 0.06);
@@ -146,6 +146,7 @@
   --base-font-size-user-medium: 1rem;
   --base-font-size-user-large: 1.125rem;
   --base-font-size-user-xl: 1.25rem;
+  --base-font-size-scale-25: 0.5rem;
   --base-font-size-scale-50: 0.625rem;
   --base-font-size-scale-100: 0.75rem;
   --base-font-size-scale-150: 0.875rem;
@@ -241,6 +242,7 @@
   --semantic-spacing-gap-md: 1rem;
   --semantic-spacing-gap-lg: 1.5rem;
   --semantic-spacing-gap-xl: 2.5rem;
+  --semantic-font-size-body-3xs: 0.5rem;
   --semantic-font-size-body-2xs: 0.625rem;
   --semantic-font-size-body-xs: 0.75rem;
   --semantic-font-size-body-sm: 0.875rem;
@@ -345,6 +347,13 @@
   --component-bottom-drawer-height: 3.5rem;
   --component-bottom-drawer-border-width: 1px;
   --component-bottom-drawer-z-index: 200;
+  --component-bottom-sheet-header-height: 3.5rem;
+  --component-bottom-sheet-border-radius: 0.5rem;
+  --component-bottom-sheet-handle-width: 2.5rem;
+  --component-bottom-sheet-handle-height: 0.25rem;
+  --component-bottom-sheet-padding: 1rem;
+  --component-bottom-sheet-background: #ffffff;
+  --component-bottom-sheet-z-index: 200;
   --component-calendar-month-gap: 2rem;
   --component-calendar-heading-padding-block: 0.75rem;
   --component-calendar-heading-padding-block-compact: 0.5rem;
@@ -355,7 +364,7 @@
   --component-calendar-cell-size: 2rem;
   --component-calendar-cell-size-compact: 1.5rem;
   --component-calendar-cell-border-radius: 0.25rem;
-  --component-card-padding: 1.25rem;
+  --component-card-padding: 1rem;
   --component-card-border-radius: 0.5rem;
   --component-card-border-width: 1px;
   --component-card-icon-size: 1.25rem;
@@ -656,9 +665,11 @@
   --component-segmented-padding: 0.1875rem;
   --component-segmented-gap: 0.125rem;
   --component-segmented-segment-padding-block: 0.25rem;
-  --component-segmented-segment-padding-inline: 0.75rem;
+  --component-segmented-segment-padding-inline: 0.5rem;
   --component-segmented-segment-padding-block-sm: 0.125rem;
   --component-segmented-segment-padding-inline-sm: 0.5rem;
+  --component-segmented-segment-padding-block-lg: 0.5rem;
+  --component-segmented-segment-padding-inline-lg: 1rem;
   --component-segmented-border-width: 1px;
   --component-segmented-font-weight-default: 400;
   --component-segmented-font-weight-active: 500;
@@ -973,6 +984,12 @@
   --theme-a1-accessible-font-user-size-medium: 1rem;
   --theme-a1-accessible-font-user-size-large: 1.125rem;
   --theme-a1-accessible-font-user-size-xl: 1.25rem;
+  --theme-a1-aperture-font-family-body: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --theme-a1-aperture-font-family-heading: 'Playfair Display', Georgia, Cambria, 'Times New Roman', serif;
+  --theme-a1-aperture-font-family-display: 'Pinyon Script', 'Tangerine', 'Snell Roundhand', cursive;
+  --theme-a1-aperture-font-weight-body: 400;
+  --theme-a1-aperture-font-weight-heading: 600;
+  --theme-a1-aperture-font-weight-display: 400;
   --theme-a1-catlympics-font-family-body: 'Nunito Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   --theme-a1-catlympics-font-family-heading: 'Patrick Hand SC', system-ui, -apple-system, sans-serif;
   --theme-a1-catlympics-font-family-display: 'Baloo 2', system-ui, -apple-system, sans-serif;
@@ -980,6 +997,12 @@
   --theme-a1-catlympics-font-weight-body: 400;
   --theme-a1-catlympics-font-weight-heading: 400;
   --theme-a1-catlympics-font-weight-display: 700;
+  --theme-a1-crochet-font-family-body: 'Roboto Slab', 'Bitter', Rockwell, 'Roboto Slab', Georgia, serif;
+  --theme-a1-crochet-font-family-heading: 'Libre Baskerville', Georgia, Cambria, 'Times New Roman', serif;
+  --theme-a1-crochet-font-family-display: 'Fraunces', 'Playfair Display', Georgia, Cambria, 'Times New Roman', serif;
+  --theme-a1-crochet-font-weight-body: 400;
+  --theme-a1-crochet-font-weight-heading: 700;
+  --theme-a1-crochet-font-weight-display: 600;
   --theme-a1-fresh-font-family-body: Nunito, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   --theme-a1-fresh-font-family-heading: Nunito, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   --theme-a1-fresh-font-family-display: Baskerville, 'Baskerville Old Face', 'Libre Baskerville', Georgia, Cambria, serif;