@orioncactuscorp/ui 1.9.2 → 1.11.0

package/src/scss/foundations/color.theme.light.scss

@@ -7,6 +7,7 @@
   --oc-color-theme-static-black: var(--oc-color-global-common-0);
   --oc-color-theme-static-transparent: var(--oc-color-global-common-transparent);
   --oc-color-theme-primary-normal: var(--oc-color-global-redOrange-50);
+  --oc-color-theme-focus-ring: var(--oc-color-theme-primary-normal);
   --oc-color-theme-label-strong: var(--oc-color-global-common-0);
   --oc-color-theme-label-normal: var(--oc-color-global-coolNeutral-10);
   --oc-color-theme-label-neutral: #{oc-alpha(coolNeutral-22, 88)};

package/src/scss/foundations/focus.scss

@@ -0,0 +1,4 @@
+:root {
+  --oc-focus-ring-width: 2px;
+  --oc-focus-ring-offset: 2px;
+}

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

@@ -0,0 +1,48 @@
+import { compileString } from 'sass';
+import { describe, expect, it } from 'vitest';
+
+describe('focus foundation', () => {
+  const compileFocus = () =>
+    compileString("@use 'foundations/focus' as *;", {
+      loadPaths: ['src/scss'],
+    });
+
+  it('exposes the focus ring size tokens', () => {
+    const result = compileFocus();
+
+    expect(result.css).toContain('--oc-focus-ring-width: 2px;');
+    expect(result.css).toContain('--oc-focus-ring-offset: 2px;');
+  });
+
+  // Protects the documented Full Foundation Rebuild composition
+  // (docs/responsive-foundation-profile.md): replacing foundations.css with
+  // the SCSS-source imports must still emit the focus ring tokens, or the
+  // reset-layer outline declarations become invalid at computed-value time.
+  it('keeps focus tokens in the full foundation rebuild composition', () => {
+    const result = compileString(
+      `
+      @use 'foundations/responsive.config' with (
+        $oc-responsive-mode: static,
+        $oc-responsive-static-stop: md
+      );
+      @use 'foundations/color.global' as *;
+      @use 'foundations/color.theme.light' as *;
+      @use 'foundations/color.theme.dark' as *;
+      @use 'foundations/breakpoint' as *;
+      @use 'foundations/typo' as *;
+      @use 'foundations/space' as *;
+      @use 'foundations/atomic' as *;
+      @use 'foundations/focus' as *;
+      @use 'foundations/motion' as *;
+      @use 'foundations/zindex' as *;
+      `,
+      { loadPaths: ['src/scss'] },
+    );
+
+    expect(result.css).toContain('--oc-focus-ring-width: 2px;');
+    expect(result.css).toContain('--oc-focus-ring-offset: 2px;');
+    expect(result.css).toContain(
+      '--oc-color-theme-focus-ring: var(--oc-color-theme-primary-normal);',
+    );
+  });
+});

package/src/scss/foundations/reset.scss

@@ -1,3 +1,5 @@
+@use '../mixins/focus' as *;
+
 /* Box sizing rules */
 *,
 *::before,
@@ -106,10 +108,13 @@ button {
   appearance: none;
 }
 
-button {
-  &:focus-visible {
-    outline: none;
-  }
+/* Centralized keyboard focus ring. :where() keeps specificity at 0 so any
+   component-level outline declaration overrides it. Text-entry controls
+   (input/textarea/select) are excluded: they match :focus-visible on pointer
+   focus per spec, and the Field family owns focus presentation via its
+   :focus-within stroke. */
+:where(button, a[href], summary, [tabindex]):where(:focus-visible) {
+  @include oc-focus-ring;
 }
 
 textarea,

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

@@ -0,0 +1,32 @@
+import { compileString } from 'sass';
+import { describe, expect, it } from 'vitest';
+
+describe('reset foundation', () => {
+  const compileReset = () =>
+    compileString("@use 'foundations/reset';", {
+      loadPaths: ['src/scss'],
+    });
+
+  it('provides the centralized keyboard focus ring for focusable elements', () => {
+    const result = compileReset();
+
+    // Both halves stay inside :where() so the whole selector is specificity 0
+    // and any local outline declaration wins.
+    expect(result.css).toContain(
+      ':where(button, a[href], summary, [tabindex]):where(:focus-visible)',
+    );
+    expect(result.css).toContain(
+      'outline: var(--oc-focus-ring-width) solid var(--oc-color-theme-focus-ring);',
+    );
+    expect(result.css).toContain(
+      'outline-offset: var(--oc-focus-ring-offset);',
+    );
+  });
+
+  it('no longer suppresses the native button focus outline', () => {
+    const result = compileReset();
+    const normalized = result.css.replace(/\s+/g, '');
+
+    expect(normalized).not.toContain('button:focus-visible{outline:none');
+  });
+});

package/src/scss/index.scss

@@ -5,6 +5,7 @@
 @forward './foundations/typo';
 @forward './foundations/space';
 @forward './foundations/atomic';
+@forward './foundations/focus';
 @forward './foundations/motion';
 @forward './foundations/zindex';
 @forward './foundations/reset';
@@ -14,6 +15,7 @@
 @forward './mixins/color';
 @forward './mixins/typo';
 @forward './mixins/element';
+@forward './mixins/focus';
 @forward './mixins/radius';
 @forward './mixins/motion';
 @forward './spring';

package/src/scss/mixins/_focus.scss

@@ -0,0 +1,11 @@
+/**
+ * Keyboard focus ring contract. The ring is drawn with `outline` so it
+ * follows the host element's own border-radius, stays out of layout, and
+ * survives forced-colors mode. The Interaction primitive keeps owning the
+ * surface tint; it cannot carry the ring because its element opacity (the
+ * tint mechanism) would multiply into anything painted in its subtree.
+ */
+@mixin oc-focus-ring($color: var(--oc-color-theme-focus-ring), $width: var(--oc-focus-ring-width), $offset: var(--oc-focus-ring-offset)) {
+  outline: $width solid $color;
+  outline-offset: $offset;
+}

package/src/scss/mixins/_focus.test.ts

@@ -0,0 +1,58 @@
+import { compileString } from 'sass';
+import { describe, expect, it } from 'vitest';
+
+describe('focus utilities', () => {
+  const compileFocus = (scss: string) =>
+    compileString(
+      `
+      @use 'mixins/focus' as *;
+
+      ${scss}
+      `,
+      {
+        loadPaths: ['src/scss'],
+      },
+    );
+
+  it('emits the token-based focus ring by default', () => {
+    const result = compileFocus(`
+      .target {
+        &:focus-visible {
+          @include oc-focus-ring;
+        }
+      }
+    `);
+
+    expect(result.css).toContain(
+      'outline: var(--oc-focus-ring-width) solid var(--oc-color-theme-focus-ring);',
+    );
+    expect(result.css).toContain(
+      'outline-offset: var(--oc-focus-ring-offset);',
+    );
+  });
+
+  it('accepts a custom color', () => {
+    const result = compileFocus(`
+      .target {
+        @include oc-focus-ring($color: var(--custom-ring-color));
+      }
+    `);
+
+    expect(result.css).toContain(
+      'outline: var(--oc-focus-ring-width) solid var(--custom-ring-color);',
+    );
+  });
+
+  it('accepts custom width and offset', () => {
+    const result = compileFocus(`
+      .target {
+        @include oc-focus-ring($width: 3px, $offset: 1px);
+      }
+    `);
+
+    expect(result.css).toContain(
+      'outline: 3px solid var(--oc-color-theme-focus-ring);',
+    );
+    expect(result.css).toContain('outline-offset: 1px;');
+  });
+});