Component mega menu

source/00-config/mixins/button.css

@@ -58,7 +58,7 @@
 }
 
 @mixin text-button() {
-  @include focus();
+  @include focus;
 
   appearance: none;
   background: transparent;

source/00-config/mixins/focus.css

@@ -1,9 +1,9 @@
-@mixin focus($width: 2px, $offset: 2px) {
+@mixin focus($color: var(--ui-focus), $width: 2px, $offset: 2px) {
   outline: $width solid transparent;
   outline-offset: $offset;
 
   &:focus {
-    outline-color: var(--ui-focus);
+    outline-color: $color;
   }
 
   &:focus:not(:focus-visible) {

source/00-config/vars/breakpoints.css

@@ -15,6 +15,8 @@
 @custom-media --mobile-lg-max (width < 480px);
 @custom-media --tablet (width >= 640px);
 @custom-media --tablet-max (width < 640px);
+@custom-media --mobile-menu (width >= 699px);
+@custom-media --mobile-menu-max (width < 699px);
 @custom-media --tablet-lg (width >= 880px);
 @custom-media --tablet-lg-max (width < 880px);
 @custom-media --desktop (width >= 1024px);

source/00-config/vars/colors.css

@@ -21,7 +21,7 @@
   --selection-text: var(--grayscale-white);
 
   --table-background: var(--grayscale-white);
-  --tablebackground-foot: var(--grayscale-gray-1);
+  --table-background-foot: var(--grayscale-gray-1);
   --table-background-head: var(--grayscale-gray-1);
   --table-border: var(--grayscale-gray-5);
 
@@ -38,8 +38,10 @@
   --ui-accent-dark: var(--brand-blue-dark-1);
   --ui-accent-light: var(--brand-blue-light);
   --ui-background: var(--grayscale-gray-3);
+  --ui-background-darker: var(--grayscale-gray-7);
   --ui-background-dark: var(--grayscale-gray-6);
   --ui-background-light: var(--grayscale-gray-1);
+  --ui-background-lighter: var(--grayscale-gray-1);
   --ui-border: var(--grayscale-gray-3);
   --ui-border-dark: var(--grayscale-gray-6);
   --ui-border-light: var(--grayscale-gray-1);

source/01-global/00-colors/color.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
+import Constrain from '../../02-layouts/Constrain/Constrain';
 import getCssVariables from '../../06-utility/storybook/getCssVariables';
 import styles from './color.module.css';
 
@@ -128,6 +129,13 @@ const ColorPaletteComponent = ({ brand, grayscale, other }: ColorFamily) => (
 const meta: Meta<typeof ColorPaletteComponent> = {
   title: 'Global/Color Palette',
   component: ColorPaletteComponent,
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
   argTypes: {
     brand: {
       table: {

source/01-global/01-typography/fonts.stories.tsx

@@ -1,11 +1,19 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { Property } from 'csstype';
 import { useEffect, useState } from 'react';
+import Constrain from '../../02-layouts/Constrain/Constrain';
 import getCssVariables from '../../06-utility/storybook/getCssVariables';
 import styles from './fonts.module.css';
 
 const meta: Meta = {
   title: 'Global/Typography/Fonts',
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
 };
 
 interface FontOptions {

source/01-global/01-typography/letterspacing.stories.tsx

@@ -1,11 +1,19 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { Property } from 'csstype';
 import { useEffect, useState } from 'react';
+import Constrain from '../../02-layouts/Constrain/Constrain';
 import getCssVariables from '../../06-utility/storybook/getCssVariables';
 import styles from './letterspacing.module.css';
 
 const meta: Meta = {
   title: 'Global/Typography/Letterspacing',
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
 };
 
 interface FontOptions {

source/01-global/01-typography/line-height.stories.tsx

@@ -1,11 +1,19 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { Property } from 'csstype';
 import { useEffect, useState } from 'react';
+import Constrain from '../../02-layouts/Constrain/Constrain';
 import getCssVariables from '../../06-utility/storybook/getCssVariables';
 import styles from './line-height.module.css';
 
 const meta: Meta = {
   title: 'Global/Typography/Line Height',
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
 };
 
 interface FontOptions {

source/01-global/01-typography/text-styles.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
+import Constrain from '../../02-layouts/Constrain/Constrain';
 import styles from './text-styles.module.css';
 
 const TextStylesComponent = () => {
@@ -23,6 +24,13 @@ const TextStylesComponent = () => {
 const meta: Meta<typeof TextStylesComponent> = {
   title: 'Global/Typography/Text Styles',
   component: TextStylesComponent,
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
   parameters: {
     controls: { hideNoControlsWarning: true },
   },

source/01-global/01-typography/typographic-scale.stories.tsx

@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { Property } from 'csstype';
 import { useEffect, useState } from 'react';
 import typographyVarsAsString from '../../00-config/vars/typography.css?raw';
+import Constrain from '../../02-layouts/Constrain/Constrain';
 import getCssVariables from '../../06-utility/storybook/getCssVariables';
 import styles from './typographic-scale.module.css';
 
@@ -26,6 +27,13 @@ const typographyVarsMin = typographyVars.map((e: string) => {
 
 const settings: Meta = {
   title: 'Global/Typography/Typographic Scale',
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
 };
 
 interface FontOptions {

source/01-global/02-spacing/space.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
+import Constrain from '../../02-layouts/Constrain/Constrain';
 import getCssVariables from '../../06-utility/storybook/getCssVariables';
 
 const allVars = getCssVariables();
@@ -61,6 +62,13 @@ const SpacingComponent = ({ spacing }: { spacing: SpacingOptions }) => {
 const meta: Meta<typeof SpacingComponent> = {
   title: 'Global/Spacing',
   component: SpacingComponent,
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
   argTypes: {
     spacing: {
       table: {

source/01-global/03-box-shadow/shadows.stories.tsx

@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { Property } from 'csstype';
+import Constrain from '../../02-layouts/Constrain/Constrain';
 import getCssVariables from '../../06-utility/storybook/getCssVariables';
 import styles from './shadows.module.css';
 
@@ -42,6 +43,13 @@ function BoxShadowDemo({
 const meta: Meta<typeof BoxShadowDemo> = {
   title: 'Global/Box Shadows',
   component: BoxShadowDemo,
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
   argTypes: {
     boxShadow: {
       table: {

source/01-global/04-transitions/duration.stories.tsx

@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { Property } from 'csstype';
+import Constrain from '../../02-layouts/Constrain/Constrain';
 import getCssVariables from '../../06-utility/storybook/getCssVariables';
 import styles from './duration.module.css';
 
@@ -43,6 +44,13 @@ const DurationComponent = ({ duration }: { duration: DurationOptions }) => {
 const meta: Meta<typeof DurationComponent> = {
   title: 'Global/Duration',
   component: DurationComponent,
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
   argTypes: {
     duration: {
       table: {

source/01-global/04-transitions/easing.stories.tsx

@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { Property } from 'csstype';
+import Constrain from '../../02-layouts/Constrain/Constrain';
 import getCssVariables from '../../06-utility/storybook/getCssVariables';
 import styles from './easing.module.css';
 
@@ -41,6 +42,13 @@ const EasingComponent = ({ easing }: { easing: EasingOptions }) => {
 const meta: Meta<typeof EasingComponent> = {
   title: 'Global/Easing',
   component: EasingComponent,
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
   argTypes: {
     easing: {
       table: {

source/01-global/html-elements/13-headings/headings.stories.tsx

@@ -1,7 +1,15 @@
 import { Meta, StoryObj } from '@storybook/react';
+import Constrain from '../../../02-layouts/Constrain/Constrain';
 
 const settings: Meta = {
   title: 'Global/HTML Elements/Headings',
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
   parameters: {
     controls: { hideNoControlsWarning: true },
   },

source/01-global/html-elements/14-paragraph/paragraph.stories.tsx

@@ -1,7 +1,15 @@
 import { Meta, StoryObj } from '@storybook/react';
+import Constrain from '../../../02-layouts/Constrain/Constrain';
 
 const meta: Meta = {
   title: 'Global/HTML Elements/Paragraph',
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
   parameters: {
     controls: { hideNoControlsWarning: true },
   },

source/01-global/html-elements/15-inline-elements/inline-elements.stories.tsx

@@ -1,7 +1,15 @@
 import { Meta, StoryObj } from '@storybook/react';
+import Constrain from '../../../02-layouts/Constrain/Constrain';
 
 const meta: Meta = {
   title: 'Global/HTML Elements/Inline Elements',
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
   parameters: {
     controls: { hideNoControlsWarning: true },
   },

source/01-global/html-elements/16-blockquote/blockquote.stories.tsx

@@ -1,7 +1,15 @@
 import { Meta, StoryObj } from '@storybook/react';
+import Constrain from '../../../02-layouts/Constrain/Constrain';
 
 const meta: Meta = {
   title: 'Global/HTML Elements/Blockquote',
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
   parameters: {
     controls: { hideNoControlsWarning: true },
   },

source/01-global/html-elements/17-preformatted-text/preformatted-text.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
+import Constrain from '../../../02-layouts/Constrain/Constrain';
 
 const data = `
     P R E F O R M A T T E D T E X T
@@ -12,6 +13,13 @@ const data = `
 
 const meta: Meta = {
   title: 'Global/HTML Elements/Preformatted Text',
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
   parameters: {
     controls: { hideNoControlsWarning: true },
   },

source/01-global/html-elements/18-horizontal-rule/horizontal-rule.stories.tsx

@@ -1,7 +1,15 @@
 import { Meta, StoryObj } from '@storybook/react';
+import Constrain from '../../../02-layouts/Constrain/Constrain';
 
 const meta: Meta = {
   title: 'Global/HTML Elements/Horizontal Rule',
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
   parameters: {
     controls: { hideNoControlsWarning: true },
   },

source/01-global/html-elements/19-address/address.stories.tsx

@@ -1,7 +1,15 @@
 import { Meta, StoryObj } from '@storybook/react';
+import Constrain from '../../../02-layouts/Constrain/Constrain';
 
 const meta: Meta = {
   title: 'Global/HTML Elements/Address',
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
   parameters: {
     controls: { hideNoControlsWarning: true },
   },

source/01-global/html-elements/20-unordered-list/unordered-list.stories.tsx

@@ -1,7 +1,15 @@
 import { Meta, StoryObj } from '@storybook/react';
+import Constrain from '../../../02-layouts/Constrain/Constrain';
 
 const meta: Meta = {
   title: 'Global/HTML Elements/Unordered List',
+  decorators: [
+    Component => (
+      <Constrain modifierClasses="u-spacing-block-4">
+        <Component />
+      </Constrain>
+    ),
+  ],
   parameters: {
     controls: { hideNoControlsWarning: true },
   },