@orioncactuscorp/ui 1.0.0

package/src/scss/foundations/color-theme.test.ts

@@ -0,0 +1,99 @@
+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('color theme foundations', () => {
+  it('compiles oc-alpha calls inside CSS custom properties', () => {
+    const css = compileScss(`
+      @use 'foundations/color.theme.light' as light;
+      @use 'foundations/color.theme.dark' as dark;
+    `);
+
+    expect(css).not.toContain('oc-alpha(');
+    expect(css).toContain(
+      '--oc-color-theme-fill-normal:color-mix(in srgb, var(--oc-color-global-coolNeutral-50), transparent calc(100% - (100% * var(--oc-color-global-opacity-8))))',
+    );
+    expect(css).toContain(
+      '--oc-color-theme-line-normal-normal:color-mix(in srgb, var(--oc-color-global-coolNeutral-50), transparent calc(100% - (100% * 0.32)))',
+    );
+  });
+
+  it('emits light + dark with system preference and attribute toggles by default', () => {
+    const css = compileScss(`
+      @use 'foundations/color.theme.light' as light;
+      @use 'foundations/color.theme.dark' as dark;
+    `);
+
+    expect(css).toMatch(
+      /:root\{[^}]*--oc-color-theme-background-normal-normal:var\(--oc-color-global-common-100\)/,
+    );
+    expect(css).toContain('[data-theme=light]');
+    expect(css).toContain('@media(prefers-color-scheme:dark)');
+    expect(css).toContain('[data-theme=dark]');
+  });
+
+  it('emits only light when $oc-color-themes is (light)', () => {
+    const css = compileScss(`
+      @use 'foundations/color.config' with ($oc-color-themes: (light,));
+      @use 'foundations/color.theme.light' as light;
+      @use 'foundations/color.theme.dark' as dark;
+    `);
+
+    expect(css).toContain('[data-theme=light]');
+    expect(css).not.toContain('@media(prefers-color-scheme:dark)');
+    expect(css).not.toContain('[data-theme=dark]');
+    expect(css).not.toContain(
+      '--oc-color-theme-background-normal-normal:var(--oc-color-global-coolNeutral-15)',
+    );
+  });
+
+  it('emits dark on :root without prefers-color-scheme when $oc-color-themes is (dark)', () => {
+    const css = compileScss(`
+      @use 'foundations/color.config' with ($oc-color-themes: (dark,));
+      @use 'foundations/color.theme.light' as light;
+      @use 'foundations/color.theme.dark' as dark;
+    `);
+
+    expect(css).not.toContain('@media(prefers-color-scheme:dark)');
+    expect(css).not.toContain('[data-theme=light]');
+    expect(css).toContain('[data-theme=dark]');
+    expect(css).toMatch(
+      /:root\{[^}]*--oc-color-theme-background-normal-normal:var\(--oc-color-global-coolNeutral-15\)/,
+    );
+  });
+
+  it('drops the prefers-color-scheme media query when $oc-color-system-preference is false', () => {
+    const css = compileScss(`
+      @use 'foundations/color.config' with ($oc-color-system-preference: false);
+      @use 'foundations/color.theme.light' as light;
+      @use 'foundations/color.theme.dark' as dark;
+    `);
+
+    expect(css).not.toContain('@media(prefers-color-scheme:dark)');
+    expect(css).toContain('[data-theme=light]');
+    expect(css).toContain('[data-theme=dark]');
+  });
+
+  it('throws when $oc-color-themes is empty', () => {
+    expect(() =>
+      compileScss(`
+        @use 'foundations/color.config' with ($oc-color-themes: ());
+      `),
+    ).toThrow(
+      '$oc-color-themes must include at least one theme (light or dark).',
+    );
+  });
+
+  it('throws for unknown theme names', () => {
+    expect(() =>
+      compileScss(`
+        @use 'foundations/color.config' with ($oc-color-themes: (sepia,));
+      `),
+    ).toThrow('Invalid theme "sepia"');
+  });
+});

package/src/scss/foundations/color.global.scss

@@ -0,0 +1,210 @@
+:root {
+  --oc-color-global-common-100: white;
+  --oc-color-global-common-0: black;
+  --oc-color-global-common-transparent: transparent;
+  --oc-color-global-neutral-100: var(--oc-color-global-common-100);
+  --oc-color-global-neutral-99: #f7f7f7;
+  --oc-color-global-neutral-95: #dcdcdc;
+  --oc-color-global-neutral-90: #c4c4c4;
+  --oc-color-global-neutral-80: #b0b0b0;
+  --oc-color-global-neutral-70: #9b9b9b;
+  --oc-color-global-neutral-60: #8a8a8a;
+  --oc-color-global-neutral-50: #737373;
+  --oc-color-global-neutral-40: #5c5c5c;
+  --oc-color-global-neutral-30: #474747;
+  --oc-color-global-neutral-22: #303030;
+  --oc-color-global-neutral-20: #2a2a2a;
+  --oc-color-global-neutral-15: #1c1c1c;
+  --oc-color-global-neutral-10: #171717;
+  --oc-color-global-neutral-5: #0f0f0f;
+  --oc-color-global-neutral-0: var(--oc-color-global-common-0);
+  --oc-color-global-coolNeutral-100: var(--oc-color-global-common-100);
+  --oc-color-global-coolNeutral-99: #f7f7f8;
+  --oc-color-global-coolNeutral-98: #f4f4f5;
+  --oc-color-global-coolNeutral-97: #eaebec;
+  --oc-color-global-coolNeutral-96: #e1e2e4;
+  --oc-color-global-coolNeutral-95: #dbdcdf;
+  --oc-color-global-coolNeutral-90: #c2c4c8;
+  --oc-color-global-coolNeutral-80: #aeb0b6;
+  --oc-color-global-coolNeutral-70: #989ba2;
+  --oc-color-global-coolNeutral-60: #878a93;
+  --oc-color-global-coolNeutral-50: #70737c;
+  --oc-color-global-coolNeutral-40: #5a5c63;
+  --oc-color-global-coolNeutral-30: #46474c;
+  --oc-color-global-coolNeutral-25: #37383c;
+  --oc-color-global-coolNeutral-23: #333438;
+  --oc-color-global-coolNeutral-22: #2e2f33;
+  --oc-color-global-coolNeutral-20: #292a2d;
+  --oc-color-global-coolNeutral-17: #212225;
+  --oc-color-global-coolNeutral-15: #1b1c1e;
+  --oc-color-global-coolNeutral-10: #171719;
+  --oc-color-global-coolNeutral-7: #141415;
+  --oc-color-global-coolNeutral-5: #0f0f10;
+  --oc-color-global-coolNeutral-0: var(--oc-color-global-common-0);
+  --oc-color-global-red-100: var(--oc-color-global-common-100);
+  --oc-color-global-red-99: #fffafa;
+  --oc-color-global-red-95: #feecec;
+  --oc-color-global-red-90: #fed5d5;
+  --oc-color-global-red-80: #ffb5b5;
+  --oc-color-global-red-70: #ff8c8c;
+  --oc-color-global-red-60: #ff6363;
+  --oc-color-global-red-50: #ff4242;
+  --oc-color-global-red-40: #e52222;
+  --oc-color-global-red-30: #b20c0c;
+  --oc-color-global-red-20: #750404;
+  --oc-color-global-red-10: #3b0101;
+  --oc-color-global-red-0: var(--oc-color-global-common-0);
+  --oc-color-global-green-100: var(--oc-color-global-common-100);
+  --oc-color-global-green-99: #f2fff6;
+  --oc-color-global-green-95: #d9ffe6;
+  --oc-color-global-green-90: #acfcc7;
+  --oc-color-global-green-80: #7df5a5;
+  --oc-color-global-green-70: #49e57d;
+  --oc-color-global-green-60: #1ed45a;
+  --oc-color-global-green-50: #00bf40;
+  --oc-color-global-green-40: #009632;
+  --oc-color-global-green-30: #006e25;
+  --oc-color-global-green-20: #004517;
+  --oc-color-global-green-10: #00240c;
+  --oc-color-global-green-0: var(--oc-color-global-common-0);
+  --oc-color-global-orange-100: var(--oc-color-global-common-100);
+  --oc-color-global-orange-99: #fffcf7;
+  --oc-color-global-orange-95: #fef4e6;
+  --oc-color-global-orange-90: #fee6c6;
+  --oc-color-global-orange-80: #ffd49c;
+  --oc-color-global-orange-70: #ffc06e;
+  --oc-color-global-orange-60: #ffa938;
+  --oc-color-global-orange-50: #ff9200;
+  --oc-color-global-orange-40: #d47800;
+  --oc-color-global-orange-39: #d17600;
+  --oc-color-global-orange-30: #9c5800;
+  --oc-color-global-orange-20: #663a00;
+  --oc-color-global-orange-10: #361e00;
+  --oc-color-global-orange-0: var(--oc-color-global-common-0);
+  --oc-color-global-blue-100: var(--oc-color-global-common-100);
+  --oc-color-global-blue-99: #f7fbff;
+  --oc-color-global-blue-95: #eaf2fe;
+  --oc-color-global-blue-90: #c9defe;
+  --oc-color-global-blue-80: #9ec5ff;
+  --oc-color-global-blue-70: #69a5ff;
+  --oc-color-global-blue-65: #4f95ff;
+  --oc-color-global-blue-60: #3385ff;
+  --oc-color-global-blue-55: #1a75ff;
+  --oc-color-global-blue-50: #0066ff;
+  --oc-color-global-blue-45: #005eeb;
+  --oc-color-global-blue-40: #0054d1;
+  --oc-color-global-blue-30: #003e9c;
+  --oc-color-global-blue-20: #002966;
+  --oc-color-global-blue-10: #001536;
+  --oc-color-global-blue-0: var(--oc-color-global-common-0);
+  --oc-color-global-redOrange-100: var(--oc-color-global-common-100);
+  --oc-color-global-redOrange-99: #fffaf7;
+  --oc-color-global-redOrange-95: #feeee5;
+  --oc-color-global-redOrange-90: #fed9c4;
+  --oc-color-global-redOrange-80: #ffbd96;
+  --oc-color-global-redOrange-70: #ff9b61;
+  --oc-color-global-redOrange-60: #ff7b2e;
+  --oc-color-global-redOrange-50: #ff5e00;
+  --oc-color-global-redOrange-48: #f55a00;
+  --oc-color-global-redOrange-40: #c94a00;
+  --oc-color-global-redOrange-30: #913500;
+  --oc-color-global-redOrange-20: #592100;
+  --oc-color-global-redOrange-10: #290f00;
+  --oc-color-global-redOrange-0: var(--oc-color-global-common-0);
+  --oc-color-global-lime-100: var(--oc-color-global-common-100);
+  --oc-color-global-lime-99: #f8fff2;
+  --oc-color-global-lime-95: #e6ffd4;
+  --oc-color-global-lime-90: #ccfca9;
+  --oc-color-global-lime-80: #aef779;
+  --oc-color-global-lime-70: #88f03e;
+  --oc-color-global-lime-60: #6be016;
+  --oc-color-global-lime-50: #58cf04;
+  --oc-color-global-lime-40: #48ad00;
+  --oc-color-global-lime-37: #429e00;
+  --oc-color-global-lime-30: #347d00;
+  --oc-color-global-lime-20: #225200;
+  --oc-color-global-lime-10: #112900;
+  --oc-color-global-lime-0: var(--oc-color-global-common-0);
+  --oc-color-global-cyan-100: var(--oc-color-global-common-100);
+  --oc-color-global-cyan-99: #f7feff;
+  --oc-color-global-cyan-95: #defaff;
+  --oc-color-global-cyan-90: #b5f4ff;
+  --oc-color-global-cyan-80: #8aedff;
+  --oc-color-global-cyan-70: #57dff7;
+  --oc-color-global-cyan-60: #28d0ed;
+  --oc-color-global-cyan-50: #00bdde;
+  --oc-color-global-cyan-40: #0098b2;
+  --oc-color-global-cyan-30: #006f82;
+  --oc-color-global-cyan-20: #004854;
+  --oc-color-global-cyan-10: #00252b;
+  --oc-color-global-cyan-0: var(--oc-color-global-common-0);
+  --oc-color-global-lightBlue-100: var(--oc-color-global-common-100);
+  --oc-color-global-lightBlue-99: #f7fdff;
+  --oc-color-global-lightBlue-95: #e5f6fe;
+  --oc-color-global-lightBlue-90: #c4ecfe;
+  --oc-color-global-lightBlue-80: #a1e1ff;
+  --oc-color-global-lightBlue-70: #70d2ff;
+  --oc-color-global-lightBlue-60: #3dc2ff;
+  --oc-color-global-lightBlue-50: #00aeff;
+  --oc-color-global-lightBlue-40: #008dcf;
+  --oc-color-global-lightBlue-30: #006796;
+  --oc-color-global-lightBlue-20: #004261;
+  --oc-color-global-lightBlue-10: #002130;
+  --oc-color-global-lightBlue-0: var(--oc-color-global-common-0);
+  --oc-color-global-violet-100: var(--oc-color-global-common-100);
+  --oc-color-global-violet-99: #fbfaff;
+  --oc-color-global-violet-95: #f0ecfe;
+  --oc-color-global-violet-90: #dbd3fe;
+  --oc-color-global-violet-80: #c0b0ff;
+  --oc-color-global-violet-70: #9e86fc;
+  --oc-color-global-violet-60: #7d5ef7;
+  --oc-color-global-violet-50: #6541f2;
+  --oc-color-global-violet-45: #5b37ed;
+  --oc-color-global-violet-40: #4f29e5;
+  --oc-color-global-violet-30: #3a16c9;
+  --oc-color-global-violet-20: #23098f;
+  --oc-color-global-violet-10: #11024d;
+  --oc-color-global-violet-0: var(--oc-color-global-common-0);
+  --oc-color-global-purple-100: var(--oc-color-global-common-100);
+  --oc-color-global-purple-99: #fefbff;
+  --oc-color-global-purple-95: #f9edff;
+  --oc-color-global-purple-90: #f2d6ff;
+  --oc-color-global-purple-80: #e9baff;
+  --oc-color-global-purple-70: #de96ff;
+  --oc-color-global-purple-60: #d478ff;
+  --oc-color-global-purple-50: #cb59ff;
+  --oc-color-global-purple-40: #ad36e3;
+  --oc-color-global-purple-30: #861cb8;
+  --oc-color-global-purple-20: #580a7d;
+  --oc-color-global-purple-10: #290247;
+  --oc-color-global-purple-0: var(--oc-color-global-common-0);
+  --oc-color-global-pink-100: var(--oc-color-global-common-100);
+  --oc-color-global-pink-99: #fffafe;
+  --oc-color-global-pink-95: #feecfb;
+  --oc-color-global-pink-90: #fed3f7;
+  --oc-color-global-pink-80: #ffb8f3;
+  --oc-color-global-pink-70: #ff94ed;
+  --oc-color-global-pink-60: #fa73e3;
+  --oc-color-global-pink-50: #f553da;
+  --oc-color-global-pink-46: #e846cd;
+  --oc-color-global-pink-40: #d331b8;
+  --oc-color-global-pink-30: #a81690;
+  --oc-color-global-pink-20: #730560;
+  --oc-color-global-pink-10: #3d0133;
+  --oc-color-global-pink-0: var(--oc-color-global-common-0);
+  --oc-color-global-opacity-0: 0;
+  --oc-color-global-opacity-5: 0.05;
+  --oc-color-global-opacity-8: 0.08;
+  --oc-color-global-opacity-12: 0.12;
+  --oc-color-global-opacity-16: 0.16;
+  --oc-color-global-opacity-22: 0.22;
+  --oc-color-global-opacity-28: 0.28;
+  --oc-color-global-opacity-35: 0.35;
+  --oc-color-global-opacity-43: 0.43;
+  --oc-color-global-opacity-52: 0.52;
+  --oc-color-global-opacity-61: 0.61;
+  --oc-color-global-opacity-74: 0.74;
+  --oc-color-global-opacity-88: 0.88;
+  --oc-color-global-opacity-97: 0.97;
+  --oc-color-global-opacity-100: 1;
+}

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

@@ -0,0 +1,80 @@
+@use 'sass:list';
+@use './color.config' as config;
+@use '../mixins/color' as *;
+
+@mixin color-theme-dark {
+  --oc-color-theme-static-white: var(--oc-color-global-common-100);
+  --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-60);
+  --oc-color-theme-label-strong: var(--oc-color-global-common-100);
+  --oc-color-theme-label-normal: var(--oc-color-global-coolNeutral-99);
+  --oc-color-theme-label-neutral: #{oc-alpha(coolNeutral-90, 88)};
+  --oc-color-theme-label-alternative: #{oc-alpha(coolNeutral-80, 61)};
+  --oc-color-theme-label-assistive: #{oc-alpha(coolNeutral-80, 28)};
+  --oc-color-theme-label-disable: #{oc-alpha(coolNeutral-70, 16)};
+  --oc-color-theme-background-normal-normal: var(--oc-color-global-coolNeutral-15);
+  --oc-color-theme-background-normal-alternative: var(--oc-color-global-coolNeutral-5);
+  --oc-color-theme-background-elevated-normal: var(--oc-color-global-coolNeutral-17);
+  --oc-color-theme-background-elevated-alternative: var(--oc-color-global-coolNeutral-7);
+  --oc-color-theme-interaction-inactive: var(--oc-color-global-coolNeutral-40);
+  --oc-color-theme-interaction-disable: var(--oc-color-global-coolNeutral-22);
+  --oc-color-theme-line-normal-strong: #{oc-alpha(coolNeutral-90, 52)};
+  --oc-color-theme-line-normal-normal: #{oc-alpha(coolNeutral-50, 0.32)};
+  --oc-color-theme-line-normal-neutral: #{oc-alpha(coolNeutral-50, 28)};
+  --oc-color-theme-line-normal-alternative: #{oc-alpha(coolNeutral-50, 22)};
+  --oc-color-theme-line-solid-strong: var(--oc-color-global-coolNeutral-50);
+  --oc-color-theme-line-solid-normal: var(--oc-color-global-coolNeutral-25);
+  --oc-color-theme-line-solid-neutral: var(--oc-color-global-coolNeutral-23);
+  --oc-color-theme-line-solid-alternative: var(--oc-color-global-coolNeutral-22);
+  --oc-color-theme-fill-normal: #{oc-alpha(coolNeutral-50, 22)};
+  --oc-color-theme-fill-strong: #{oc-alpha(coolNeutral-50, 28)};
+  --oc-color-theme-fill-alternative: #{oc-alpha(coolNeutral-50, 12)};
+  --oc-color-theme-accent-background-red: var(--oc-color-global-red-60);
+  --oc-color-theme-accent-background-orange: var(--oc-color-global-orange-60);
+  --oc-color-theme-accent-background-lime: var(--oc-color-global-lime-60);
+  --oc-color-theme-accent-background-green: var(--oc-color-global-green-60);
+  --oc-color-theme-accent-background-cyan: var(--oc-color-global-cyan-60);
+  --oc-color-theme-accent-background-lightBlue: var(--oc-color-global-lightBlue-60);
+  --oc-color-theme-accent-background-blue: var(--oc-color-global-blue-60);
+  --oc-color-theme-accent-background-violet: var(--oc-color-global-violet-60);
+  --oc-color-theme-accent-background-purple: var(--oc-color-global-purple-60);
+  --oc-color-theme-accent-background-pink: var(--oc-color-global-pink-60);
+  --oc-color-theme-accent-background-redOrange: var(--oc-color-global-redOrange-60);
+  --oc-color-theme-accent-foreground-red: var(--oc-color-global-red-60);
+  --oc-color-theme-accent-foreground-redOrange: var(--oc-color-global-redOrange-60);
+  --oc-color-theme-accent-foreground-orange: var(--oc-color-global-orange-50);
+  --oc-color-theme-accent-foreground-lime: var(--oc-color-global-lime-50);
+  --oc-color-theme-accent-foreground-green: var(--oc-color-global-green-60);
+  --oc-color-theme-accent-foreground-cyan: var(--oc-color-global-cyan-50);
+  --oc-color-theme-accent-foreground-lightBlue: var(--oc-color-global-lightBlue-50);
+  --oc-color-theme-accent-foreground-blue: var(--oc-color-global-blue-65);
+  --oc-color-theme-accent-foreground-violet: var(--oc-color-global-violet-70);
+  --oc-color-theme-accent-foreground-purple: var(--oc-color-global-purple-60);
+  --oc-color-theme-accent-foreground-pink: var(--oc-color-global-pink-60);
+  --oc-color-theme-status-positive: var(--oc-color-theme-accent-background-green);
+  --oc-color-theme-status-cautionary: var(--oc-color-theme-accent-background-orange);
+  --oc-color-theme-status-negative: var(--oc-color-theme-accent-background-red);
+  --oc-color-theme-inverse-primary: var(--oc-color-global-redOrange-50);
+  --oc-color-theme-inverse-background: var(--oc-color-global-common-100);
+  --oc-color-theme-inverse-label: var(--oc-color-global-coolNeutral-10);
+  --oc-color-theme-material-dimmer: #{oc-alpha(coolNeutral-10, 74)};
+}
+
+@if list.index(config.$oc-color-themes, dark) {
+  @if not list.index(config.$oc-color-themes, light) {
+    :root {
+      @include color-theme-dark;
+    }
+  } @else if config.$oc-color-system-preference {
+    :root {
+      @media (prefers-color-scheme: dark) {
+        @include color-theme-dark;
+      }
+    }
+  }
+
+  [data-theme='dark'] {
+    @include color-theme-dark;
+  }
+}

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

@@ -0,0 +1,72 @@
+@use 'sass:list';
+@use './color.config' as config;
+@use '../mixins/color' as *;
+
+@mixin color-theme-light {
+  --oc-color-theme-static-white: var(--oc-color-global-common-100);
+  --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-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)};
+  --oc-color-theme-label-alternative: #{oc-alpha(coolNeutral-25, 61)};
+  --oc-color-theme-label-assistive: #{oc-alpha(coolNeutral-25, 28)};
+  --oc-color-theme-label-disable: #{oc-alpha(coolNeutral-25, 16)};
+  --oc-color-theme-background-normal-normal: var(--oc-color-global-common-100);
+  --oc-color-theme-background-normal-alternative: var(--oc-color-global-coolNeutral-99);
+  --oc-color-theme-background-elevated-normal: var(--oc-color-global-common-100);
+  --oc-color-theme-background-elevated-alternative: var(--oc-color-global-coolNeutral-99);
+  --oc-color-theme-interaction-inactive: var(--oc-color-global-coolNeutral-70);
+  --oc-color-theme-interaction-disable: var(--oc-color-global-coolNeutral-98);
+  --oc-color-theme-line-normal-strong: #{oc-alpha(coolNeutral-50, 52)};
+  --oc-color-theme-line-normal-normal: #{oc-alpha(coolNeutral-50, 22)};
+  --oc-color-theme-line-normal-neutral: #{oc-alpha(coolNeutral-50, 16)};
+  --oc-color-theme-line-normal-alternative: #{oc-alpha(coolNeutral-50, 8)};
+  --oc-color-theme-line-solid-strong: var(--oc-color-global-coolNeutral-80);
+  --oc-color-theme-line-solid-normal: var(--oc-color-global-coolNeutral-96);
+  --oc-color-theme-line-solid-neutral: var(--oc-color-global-coolNeutral-97);
+  --oc-color-theme-line-solid-alternative: var(--oc-color-global-coolNeutral-98);
+  --oc-color-theme-fill-normal: #{oc-alpha(coolNeutral-50, 8)};
+  --oc-color-theme-fill-strong: #{oc-alpha(coolNeutral-50, 16)};
+  --oc-color-theme-fill-alternative: #{oc-alpha(coolNeutral-50, 5)};
+  --oc-color-theme-accent-background-red: var(--oc-color-global-red-50);
+  --oc-color-theme-accent-background-orange: var(--oc-color-global-orange-50);
+  --oc-color-theme-accent-background-lime: var(--oc-color-global-lime-50);
+  --oc-color-theme-accent-background-green: var(--oc-color-global-green-50);
+  --oc-color-theme-accent-background-cyan: var(--oc-color-global-cyan-50);
+  --oc-color-theme-accent-background-lightBlue: var(--oc-color-global-lightBlue-50);
+  --oc-color-theme-accent-background-blue: var(--oc-color-global-blue-50);
+  --oc-color-theme-accent-background-violet: var(--oc-color-global-violet-50);
+  --oc-color-theme-accent-background-purple: var(--oc-color-global-purple-50);
+  --oc-color-theme-accent-background-pink: var(--oc-color-global-pink-50);
+  --oc-color-theme-accent-background-redOrange: var(--oc-color-global-redOrange-50);
+  --oc-color-theme-accent-foreground-red: var(--oc-color-global-red-40);
+  --oc-color-theme-accent-foreground-redOrange: var(--oc-color-global-redOrange-48);
+  --oc-color-theme-accent-foreground-orange: var(--oc-color-global-orange-39);
+  --oc-color-theme-accent-foreground-lime: var(--oc-color-global-lime-37);
+  --oc-color-theme-accent-foreground-green: var(--oc-color-global-green-40);
+  --oc-color-theme-accent-foreground-cyan: var(--oc-color-global-cyan-40);
+  --oc-color-theme-accent-foreground-lightBlue: var(--oc-color-global-lightBlue-40);
+  --oc-color-theme-accent-foreground-blue: var(--oc-color-global-blue-45);
+  --oc-color-theme-accent-foreground-violet: var(--oc-color-global-violet-45);
+  --oc-color-theme-accent-foreground-purple: var(--oc-color-global-purple-40);
+  --oc-color-theme-accent-foreground-pink: var(--oc-color-global-pink-46);
+  --oc-color-theme-status-positive: var(--oc-color-theme-accent-background-green);
+  --oc-color-theme-status-cautionary: var(--oc-color-theme-accent-background-orange);
+  --oc-color-theme-status-negative: var(--oc-color-theme-accent-background-red);
+  --oc-color-theme-inverse-primary: var(--oc-color-global-redOrange-60);
+  --oc-color-theme-inverse-background: var(--oc-color-global-coolNeutral-15);
+  --oc-color-theme-inverse-label: var(--oc-color-global-coolNeutral-99);
+  --oc-color-theme-material-dimmer: #{oc-alpha(coolNeutral-10, 52)};
+}
+
+@if list.index(config.$oc-color-themes, light) {
+  :root {
+    @include color-theme-light;
+  }
+
+  [data-theme='light'] {
+    @include color-theme-light;
+  }
+}

package/src/scss/foundations/motion.scss

@@ -0,0 +1,46 @@
+@use '../spring' as *;
+
+:root {
+  --oc-motion-duration-scale: 1;
+  --oc-motion-duration-scale-reduced: 0.75;
+  --oc-motion-duration-scale-preserve: 1;
+  --oc-motion-scale: 1;
+  --oc-motion-scale-feedback: var(--oc-motion-scale);
+  --oc-motion-scale-reveal: var(--oc-motion-scale);
+  --oc-motion-distance-scale: 1;
+  --oc-motion-distance-scale-reject: var(--oc-motion-distance-scale);
+  --oc-motion-distance-scale-reveal: var(--oc-motion-distance-scale);
+
+  /* Pace tokens are unitless duration multipliers. */
+  --oc-motion-pace-quick: 0.75;
+  --oc-motion-pace-normal: 1;
+  --oc-motion-pace-slow: 1.35;
+  --oc-motion-duration-feedback: 0.2s;
+  --oc-motion-duration-reject: #{oc-spring-settle-duration(0.32s, smooth)};
+  --oc-motion-duration-reveal: 0.3s;
+  --oc-motion-duration-reveal-exit: 0.125s;
+  --oc-motion-duration-move: 0.3s;
+  --oc-motion-duration-gesture: 0.2s;
+  --oc-motion-duration-gesture-settle: 0.52s;
+  --oc-motion-duration-ambient: 1.2s;
+  --oc-motion-timing-feedback: ease;
+  --oc-motion-timing-reject: #{oc-spring-timing(0.32s, smooth, $samples: 64)};
+  --oc-motion-timing-reveal: ease;
+  --oc-motion-timing-reveal-exit: ease-in;
+  --oc-motion-timing-move: cubic-bezier(0.32, 0.72, 0, 1);
+  --oc-motion-timing-gesture: ease;
+  --oc-motion-timing-gesture-settle: cubic-bezier(0.32, 0.72, 0, 1);
+  --oc-motion-timing-ambient: linear;
+  --oc-spring-smooth-timing: #{oc-spring-timing(0.5s, smooth, $samples: 64)};
+  --oc-spring-smooth-duration-scale: #{oc-spring-duration-scale(0.5s, smooth)};
+  --oc-spring-snappy-timing: #{oc-spring-timing(0.5s, snappy, $samples: 64)};
+  --oc-spring-snappy-duration-scale: #{oc-spring-duration-scale(0.5s, snappy)};
+  --oc-spring-bouncy-timing: #{oc-spring-timing(0.5s, bouncy, $samples: 64)};
+  --oc-spring-bouncy-duration-scale: #{oc-spring-duration-scale(0.5s, bouncy)};
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --oc-motion-duration-scale: var(--oc-motion-duration-scale-reduced);
+  }
+}

package/src/scss/foundations/reset.scss

@@ -0,0 +1,129 @@
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Prevent font size inflation */
+html {
+  -moz-text-size-adjust: none;
+  -webkit-text-size-adjust: none;
+  text-size-adjust: none;
+}
+
+/* Set core body defaults */
+body {
+  min-height: 100dvh;
+}
+
+/* Remove default margin in favour of better control in authored CSS */
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+figure,
+blockquote,
+dl,
+dd,
+input {
+  margin: 0;
+}
+
+/* Inherit fonts */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+input,
+button,
+textarea,
+select,
+label {
+  font: inherit;
+}
+
+/* Balance text wrapping on headings */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  text-wrap: balance;
+}
+
+/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+ul,
+ol {
+  list-style: none;
+  padding: 0;
+}
+
+/* A elements that don't have a class get default styles */
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+  color: currentColor;
+}
+
+a:visited {
+  color: currentColor;
+}
+
+/* Make images easier to work with */
+img,
+picture {
+  max-width: 100%;
+  display: block;
+  object-fit: cover;
+}
+
+/* Make sure textareas without a rows attribute are not tiny */
+textarea:not([rows]) {
+  min-height: 10em;
+}
+
+/* Anything that has been anchored to should have extra scroll margin */
+:target {
+  scroll-margin-block: 5ex;
+}
+
+svg {
+  fill: currentColor;
+  stroke: transparent;
+}
+
+textarea,
+button {
+  padding: 0;
+  appearance: none;
+}
+
+button {
+  &:focus-visible {
+    outline: none;
+  }
+}
+
+textarea,
+input[type='text'] {
+  color: currentColor;
+  background-color: transparent;
+}
+
+input:not(input:-webkit-autofill)::-webkit-contacts-auto-fill-button {
+  background-color: currentColor;
+}
+
+iframe,
+textarea,
+button {
+  border: none;
+}