@orioncactuscorp/ui 1.0.0

package/src/scss/foundations/responsive.test.ts

@@ -0,0 +1,294 @@
+import { compileString } from 'sass';
+import { describe, expect, it } from 'vitest';
+
+const compileScss = (source: string) =>
+  compileString(source, {
+    loadPaths: ['src/scss'],
+    style: 'compressed',
+  }).css.replace(/:\s+/g, ':');
+
+describe('responsive foundations', () => {
+  it('keeps the default fluid typo and space output shape', () => {
+    const css = compileScss(`
+      @use 'foundations/typo';
+      @use 'foundations/space';
+    `);
+
+    expect(css).toContain('--oc-typo-size-display1:3rem');
+    expect(css).toContain('--oc-typo-height-body1reading:1.625rem');
+    expect(css).toContain('@media screen and (max-width:768px)');
+    expect(css).toContain(
+      '--oc-typo-size-body1:clamp(1rem, 17 / 375 * 100vw, 1.0625rem)',
+    );
+    expect(css).toContain('@media screen and (min-width:1281px)');
+    expect(css).toContain(
+      '--oc-typo-height-caption2:clamp(1.125rem, 20 / 1600 * 100vw, 1.25rem)',
+    );
+    expect(css).toContain('--oc-space-section-padding-viewport-x:1rem');
+    expect(css).toContain(
+      '--oc-space-section-padding-viewport-x:clamp(1rem, 24 / 480 * 100vw, 1.5rem)',
+    );
+    expect(css).toContain(
+      '--oc-space-section-padding-viewport-x:clamp(2rem, 32 / 768 * 100vw, 3rem)',
+    );
+    expect(css).toContain('@media screen and (min-width:1921px)');
+  });
+
+  it('uses one responsive config for typo and space stepped output', () => {
+    const css = compileScss(`
+      @use 'foundations/responsive.config' with (
+        $oc-responsive-mode: stepped,
+        $oc-responsive-stops: (sm, md)
+      );
+      @use 'foundations/typo';
+      @use 'foundations/space';
+    `);
+
+    expect(css).not.toContain('clamp(');
+    expect(css).toContain('--oc-typo-size-body1:1rem');
+    expect(css).toContain('--oc-space-section-padding-viewport-x:1.5rem');
+    expect(css).toMatch(
+      /@media screen and \(min-width:769px\)\{:root\{[^}]*--oc-typo-size-body1:1\.0625rem/,
+    );
+    expect(css).toMatch(
+      /@media screen and \(min-width:769px\)\{:root\{[^}]*--oc-space-section-padding-viewport-x:2rem/,
+    );
+  });
+
+  it('allows typo and space to use separate active stop ranges', () => {
+    const css = compileScss(`
+      @use 'foundations/responsive.config' with (
+        $oc-responsive-mode: stepped,
+        $oc-responsive-typo-stops: (sm),
+        $oc-responsive-space-stops: (sm, md)
+      );
+      @use 'foundations/typo';
+      @use 'foundations/space';
+    `);
+
+    expect(css).not.toContain('clamp(');
+    expect(css).toContain('--oc-typo-size-body1:1rem');
+    expect(css).toContain('--oc-space-section-padding-viewport-x:1.5rem');
+    expect(css).not.toMatch(
+      /@media screen and \(min-width:769px\)\{:root\{[^}]*--oc-typo-size-body1:/,
+    );
+    expect(css).toMatch(
+      /@media screen and \(min-width:769px\)\{:root\{[^}]*--oc-space-section-padding-viewport-x:2rem/,
+    );
+  });
+
+  it('supports a stepped points space profile for two-mode viewport libraries', () => {
+    const css = compileScss(`
+      @use 'foundations/responsive.config' with (
+        $oc-responsive-mode: stepped,
+        $oc-responsive-typo-stops: (sm),
+        $oc-responsive-space-stops: (md, lg, xl),
+        $oc-responsive-space-profile: (
+          type: stepped-points,
+          points: (
+            base: md,
+            min-md: max-active-defined
+          )
+        )
+      );
+      @use 'foundations/typo' with (
+        $oc-typo-size-overrides: (
+          display1: (sm: 56),
+          title1: (sm: 36)
+        ),
+        $oc-typo-height-overrides: (
+          display1: (sm: 72),
+          title1: (sm: 48)
+        )
+      );
+      @use 'foundations/space' with (
+        $oc-space-overrides: (
+          section-padding-viewport-x: (md: 20, xl: 32),
+          section-padding-viewport-y: (md: 16, xl: 24),
+          item-gap-small: (xl: null)
+        )
+      );
+    `);
+
+    expect(css).not.toContain('clamp(');
+    expect(css).toContain('--oc-typo-size-display1:3.5rem');
+    expect(css).toContain('--oc-typo-size-title1:2.25rem');
+    expect(css).toContain('--oc-space-section-padding-viewport-x:1.25rem');
+    expect(css).toContain('--oc-space-section-padding-viewport-y:1rem');
+    expect(css).toContain('--oc-space-item-padding-xsmall:0.75rem');
+    expect(css).toContain('--oc-space-item-gap-small:0.75rem');
+    expect(css).toContain('--oc-space-item-gap-tiny:0.375rem');
+    expect(css).not.toMatch(
+      /@media screen and \(min-width:769px\)\{:root\{[^}]*--oc-typo-size-display1:/,
+    );
+    expect(css).toMatch(
+      /@media screen and \(min-width:769px\)\{:root\{[^}]*--oc-space-section-padding-viewport-x:2rem/,
+    );
+    expect(css).toMatch(
+      /@media screen and \(min-width:769px\)\{:root\{[^}]*--oc-space-section-padding-viewport-y:1\.5rem/,
+    );
+    expect(css).toMatch(
+      /@media screen and \(min-width:769px\)\{:root\{[^}]*--oc-space-item-padding-xsmall:1rem/,
+    );
+    expect(css).toMatch(
+      /@media screen and \(min-width:769px\)\{:root\{[^}]*--oc-space-item-gap-small:0\.875rem/,
+    );
+    expect(css).toMatch(
+      /@media screen and \(min-width:769px\)\{:root\{[^}]*--oc-space-item-gap-tiny:0\.5rem/,
+    );
+  });
+
+  it('emits stepped points in breakpoint order regardless of config order', () => {
+    const css = compileScss(`
+      @use 'foundations/responsive.config' with (
+        $oc-responsive-mode: stepped,
+        $oc-responsive-space-stops: (md, lg, xl),
+        $oc-responsive-space-profile: (
+          type: stepped-points,
+          points: (
+            base: md,
+            min-lg: xl,
+            min-md: lg
+          )
+        )
+      );
+      @use 'foundations/space';
+    `);
+
+    expect(css.indexOf('@media screen and (min-width:769px)')).toBeLessThan(
+      css.indexOf('@media screen and (min-width:1281px)'),
+    );
+    expect(css).toMatch(
+      /@media screen and \(min-width:769px\)\{:root\{[^}]*--oc-space-item-padding-xsmall:0\.875rem/,
+    );
+    expect(css).toMatch(
+      /@media screen and \(min-width:1281px\)\{:root\{[^}]*--oc-space-item-padding-xsmall:1rem/,
+    );
+  });
+
+  it('throws an actionable error for unknown stepped point names', () => {
+    expect(() =>
+      compileScss(`
+        @use 'foundations/responsive.config' with (
+          $oc-responsive-mode: stepped,
+          $oc-responsive-space-profile: (
+            type: stepped-points,
+            points: (
+              base: md,
+              min-mdd: lg
+            )
+          )
+        );
+        @use 'foundations/space';
+      `),
+    ).toThrow("Unknown responsive profile point 'min-mdd'.");
+  });
+
+  it('includes the token name when max-active-defined cannot resolve a value', () => {
+    expect(() =>
+      compileScss(`
+        @use 'foundations/responsive.config' with (
+          $oc-responsive-mode: stepped,
+          $oc-responsive-space-stops: (lg, xl),
+          $oc-responsive-space-profile: (
+            type: stepped-points,
+            points: (
+              base: max-active-defined
+            )
+          )
+        );
+        @use 'foundations/space' with (
+          $oc-space-overrides: (
+            item-padding-xsmall: (lg: null, xl: null)
+          )
+        );
+      `),
+    ).toThrow(
+      "Responsive token 'item-padding-xsmall' has no values in $oc-responsive-space-stops.",
+    );
+  });
+
+  it('uses the first foundation active stop as the static fallback', () => {
+    const css = compileScss(`
+      @use 'foundations/responsive.config' with (
+        $oc-responsive-mode: static,
+        $oc-responsive-stops: (lg),
+        $oc-responsive-typo-stops: (sm),
+        $oc-responsive-space-stops: (md)
+      );
+      @use 'foundations/typo';
+      @use 'foundations/space';
+    `);
+
+    expect(css).not.toContain('clamp(');
+    expect(css).not.toContain('@media');
+    expect(css).toContain('--oc-typo-size-body1:1rem');
+    expect(css).toContain('--oc-space-section-padding-viewport-x:2rem');
+  });
+
+  it('keeps values at the nearest active stop outside the active range', () => {
+    const css = compileScss(`
+      @use 'foundations/responsive.config' with (
+        $oc-responsive-mode: stepped,
+        $oc-responsive-stops: (md, lg)
+      );
+      @use 'foundations/typo';
+    `);
+
+    expect(css).not.toContain('clamp(');
+    expect(css).toContain('--oc-typo-size-body1:1.0625rem');
+    expect(css).toMatch(
+      /@media screen and \(min-width:1281px\)\{:root\{[^}]*--oc-typo-size-body1:1\.125rem/,
+    );
+  });
+
+  it('throws an actionable error for empty responsive stops', () => {
+    expect(() =>
+      compileScss(`
+        @use 'foundations/responsive.config' with (
+          $oc-responsive-stops: ()
+        );
+        @use 'foundations/typo';
+      `),
+    ).toThrow(
+      '$oc-responsive-stops must include at least one responsive stop.',
+    );
+  });
+
+  it('throws an actionable error for empty foundation responsive stops', () => {
+    expect(() =>
+      compileScss(`
+        @use 'foundations/responsive.config' with (
+          $oc-responsive-typo-stops: ()
+        );
+        @use 'foundations/typo';
+      `),
+    ).toThrow(
+      '$oc-responsive-typo-stops must include at least one responsive stop.',
+    );
+  });
+
+  it('allows partial typo and space stop overrides', () => {
+    const css = compileScss(`
+      @use 'foundations/typo' with (
+        $oc-typo-size-overrides: (
+          body1: (sm: 17, md: 18)
+        )
+      );
+      @use 'foundations/space' with (
+        $oc-space-overrides: (
+          item-gap-medium: (md: 18, lg: 20, xl: 24)
+        )
+      );
+    `);
+
+    expect(css).toContain('--oc-typo-size-body1:1.0625rem');
+    expect(css).toContain(
+      '--oc-typo-size-body1:clamp(1.0625rem, 18 / 375 * 100vw, 1.125rem)',
+    );
+    expect(css).toContain('--oc-space-item-gap-medium:1.125rem');
+    expect(css).toContain(
+      '--oc-space-item-gap-medium:clamp(1.25rem, 24 / 1600 * 100vw, 1.5rem)',
+    );
+  });
+});

package/src/scss/foundations/space.scss

@@ -0,0 +1,206 @@
+@use 'sass:map';
+@use 'sass:math';
+@use './responsive.config' as *;
+@use '../mixins/breakpoint' as *;
+@use '../mixins/responsive' as *;
+
+$oc-space-overrides: () !default;
+$oc-space-default-stops: (
+  section-padding-viewport-x: (
+    min: 16,
+    sm: 24,
+    md: 32,
+    xl: 48,
+    hg: 64,
+  ),
+  section-padding-viewport-y: (
+    min: 16,
+    md: 24,
+    xl: 32,
+    hg: math.div(64 * 2, 3),
+  ),
+  section-gap-section: (
+    md: 48,
+    lg: 72,
+    xl: 96,
+  ),
+  section-gap-xlarge: (
+    md: 40,
+    lg: 52,
+    xl: 64,
+  ),
+  section-gap-large: (
+    md: 32,
+    lg: 40,
+    xl: 48,
+  ),
+  section-gap-medium: (
+    md: 20,
+    lg: 26,
+    xl: 32,
+  ),
+  item-padding-large: (
+    md: 24,
+    lg: 28,
+    xl: 32,
+  ),
+  item-padding-medium: (
+    md: 20,
+    lg: 24,
+    xl: 28,
+  ),
+  item-padding-small: (
+    md: 16,
+    lg: 20,
+    xl: 24,
+  ),
+  item-padding-xsmall: (
+    md: 12,
+    lg: 14,
+    xl: 16,
+  ),
+  item-padding-mini: (
+    md: 8,
+    lg: 10,
+    xl: 12,
+  ),
+  item-padding-tiny: (
+    md: 6,
+    lg: 8,
+  ),
+  item-padding-micro: (
+    md: 4,
+    lg: 6,
+  ),
+  item-padding-nano: (
+    md: 4,
+  ),
+  item-padding-atom: (
+    md: 2,
+  ),
+  item-gap-huge: (
+    md: 24,
+    lg: 32,
+    xl: 40,
+  ),
+  item-gap-xlarge: (
+    md: 20,
+    lg: 26,
+    xl: 32,
+  ),
+  item-gap-large: (
+    md: 18,
+    lg: 22,
+    xl: 24,
+  ),
+  item-gap-medium: (
+    md: 16,
+    lg: 18,
+    xl: 20,
+  ),
+  item-gap-small: (
+    md: 12,
+    lg: 14,
+    xl: 16,
+  ),
+  item-gap-xsmall: (
+    md: 10,
+    lg: 12,
+  ),
+  item-gap-mini: (
+    md: 8,
+    lg: 10,
+  ),
+  item-gap-tiny: (
+    md: 6,
+    lg: 8,
+  ),
+  item-gap-micro: (
+    md: 4,
+    lg: 6,
+  ),
+  item-gap-nano: (
+    md: 4,
+  ),
+  item-gap-atom: (
+    md: 2,
+  ),
+);
+$oc-space-stops: map.deep-merge($oc-space-default-stops, $oc-space-overrides);
+$oc-space-responsive-tokens: (section-padding-viewport-x, section-padding-viewport-y, section-gap-section, section-gap-xlarge, section-gap-large, section-gap-medium, item-padding-large, item-padding-medium, item-padding-small, item-padding-xsmall, item-padding-mini, item-padding-tiny, item-padding-micro, item-gap-huge, item-gap-xlarge, item-gap-large, item-gap-medium, item-gap-small, item-gap-xsmall, item-gap-mini, item-gap-tiny, item-gap-micro);
+$oc-space-responsive-segments: (
+  default: (
+    stop: min,
+  ),
+  max-md: (
+    media: md,
+    from: md,
+    to: lg,
+    basis: $breakpoint-md,
+    only: $oc-space-responsive-tokens,
+    token-overrides: (
+      section-padding-viewport-x: (
+        from: sm,
+        to: md,
+      ),
+      section-padding-viewport-y: (
+        from: min,
+        to: md,
+      ),
+    ),
+  ),
+  max-sm: (
+    media: sm,
+    from: min,
+    to: sm,
+    basis: $breakpoint-sm,
+    only: (
+      section-padding-viewport-x,
+    ),
+  ),
+  min-md: (
+    media: (
+      min,
+      md,
+    ),
+    from: lg,
+    to: xl,
+    basis: $breakpoint-xl,
+    only: $oc-space-responsive-tokens,
+    token-overrides: (
+      section-padding-viewport-x: (
+        from: md,
+        to: xl,
+        basis: $breakpoint-md,
+        anchor: from,
+      ),
+      section-padding-viewport-y: (
+        from: md,
+        to: xl,
+        basis: $breakpoint-md,
+        anchor: from,
+      ),
+    ),
+  ),
+  min-hg: (
+    media: hg,
+    from: xl,
+    to: hg,
+    basis: $breakpoint-hg,
+    anchor: from,
+    only: (
+      section-padding-viewport-x,
+      section-padding-viewport-y,
+    ),
+  ),
+);
+
+:root {
+  --oc-space-section-padding-viewport: var(--oc-space-section-padding-viewport-y) var(--oc-space-section-padding-viewport-x);
+  --oc-space-section-padding-viewport-x-safe-left: max(var(--oc-space-section-padding-viewport-x), env(safe-area-inset-left));
+  --oc-space-section-padding-viewport-x-safe-right: max(var(--oc-space-section-padding-viewport-x), env(safe-area-inset-right));
+  --oc-space-section-padding-viewport-y-safe-top: max(var(--oc-space-section-padding-viewport-y), env(safe-area-inset-top));
+  --oc-space-section-padding-viewport-y-safe-bottom: max(var(--oc-space-section-padding-viewport-y), env(safe-area-inset-bottom));
+
+  @include oc-emit-responsive-tokens('space', $oc-space-stops, $oc-space-responsive-segments, $oc-responsive-space-stops, '$oc-responsive-space-stops', $oc-responsive-space-profile, '$oc-responsive-space-profile');
+}