@rolemodel/optics 2.5.1 → 2.6.1

package/.github/workflows/linting.yml

@@ -29,6 +29,8 @@ jobs:
         run: yarn lint:css
       - name: Run Prettier
         run: yarn prettier-check
+      - name: Run Tests
+        run: yarn test
       - name: Build CSS
         run: yarn build:css
       - name: Build Tokens

package/.prettierignore

@@ -3,5 +3,8 @@ tools/templates
 .yarn/*
 optics-design-system.code-workspace
 
+# Claude Code settings and worktrees (each worktree is a full checkout)
+.claude/
+
 # Generated docs
 llms-docs

package/CHANGELOG.md

@@ -4,6 +4,47 @@ All notable changes to this project will be documented in this file.
 
 This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.6.1] - 2026-10-21
+
+### Theme Token Changes
+
+- Add a `--mode` option to the contrast checker by @Jeremy-Walton in https://github.com/RoleModel/optics/pull/371
+  - `optics-check-contrast` takes `--mode=light` or `--mode=dark` to check only one color mode. Use it if your app forces one mode, such as with `data-theme-mode="light"`. Both modes are still checked by default. See [Contrast Checker](https://docs.optics.rolemodel.design/?path=/docs/tools-contrast-checker--docs)
+
+### Dependencies
+
+- Add a `--mode` option to the contrast checker by @Jeremy-Walton in https://github.com/RoleModel/optics/pull/371
+  - Includes the vite bump from 8.1.4 to 8.1.6 from https://github.com/RoleModel/optics/pull/369. Development dependencies were updated in the lockfile. It does not affect the shipped CSS.
+
+### Documentation Changes
+
+- Add a `--mode` option to the contrast checker by @Jeremy-Walton in https://github.com/RoleModel/optics/pull/371
+  - The [Contrast Checker](https://docs.optics.rolemodel.design/?path=/docs/tools-contrast-checker--docs) page lists the `--mode` option and the default for each option.
+
+## [2.6.0] - 2026-10-21
+
+### Theme Token Changes
+
+- Add an opt-in OKLCH color build by @Jeremy-Walton in https://github.com/RoleModel/optics/pull/368
+  - A new `optics-oklch.css` build (and one per icon set, such as `optics-oklch+lucide_icons.css`) defines every color token with `oklch()`. To switch, replace `optics` with `optics-oklch` in your import. The HSL build stays the default and is unchanged, and `core/tokens/base_tokens.css` still includes the color tokens for apps that import it directly. Apps can also run the new `optics-check-contrast` command in CI to check their theme's text contrast. See [OKLCH Colors](https://docs.optics.rolemodel.design/?path=/docs/overview-oklch-colors--docs) and [Contrast Checker](https://docs.optics.rolemodel.design/?path=/docs/tools-contrast-checker--docs)
+
+### Dependencies
+
+- Update transitive dependencies to resolve Dependabot alerts by @Jeremy-Walton in https://github.com/RoleModel/optics/pull/367
+  - Development dependencies were updated in the lockfile. It does not affect the shipped CSS.
+
+### Repository Changes
+
+- Add an opt-in OKLCH color build by @Jeremy-Walton in https://github.com/RoleModel/optics/pull/368
+  - Added tests for the contrast checker, which `yarn test` and the Linting CI workflow now run. The docs build now creates the llms docs before Storybook.
+
+### Documentation Changes
+
+- Add an opt-in OKLCH color build by @Jeremy-Walton in https://github.com/RoleModel/optics/pull/368
+  - Added an [OKLCH Colors](https://docs.optics.rolemodel.design/?path=/docs/overview-oklch-colors--docs) page, a Tools section with the [Contrast Checker](https://docs.optics.rolemodel.design/?path=/docs/tools-contrast-checker--docs) page, an HSL / OKLCH toggle in the documentation site toolbar, and an OKLCH template on the Color Scale page.
+
+**Full Changelog**: https://github.com/RoleModel/optics/compare/v2.5.1...v2.6.0
+
 ## [2.5.1] - 2026-10-01
 
 ### Component Changes

package/README.md

@@ -40,6 +40,8 @@ You can add this import to the top of your root level `css` file.
 @import '@rolemodel/optics/dist/css/optics.min.css'; /* If you want a single file with all the styles in it. */
 ```
 
+An OKLCH build is also available. See [OKLCH Colors](https://docs.optics.rolemodel.design/?path=/docs/overview-oklch-colors--docs).
+
 ### Importing without a compiler
 
 To use Optics without compilation, use a CDN like [jsDelivr](https://www.jsdelivr.com/) or [unpkg](https://unpkg.com/).
@@ -58,6 +60,20 @@ Add a link in your HTML head or an `@import` to the top of your root level `css`
 
 Note: You can use this method to use Optics with [CodePen](https://codepen.io/). In a CodePen project, go to `Settings > CSS`, find the section for adding external stylesheets, and add the CDN link as a resource.
 
+### Checking theme contrast
+
+After customizing your theme, add `optics-check-contrast` to your CI to check that text on every color scale step passes WCAG AA:
+
+```json
+{
+  "scripts": {
+    "check-contrast": "optics-check-contrast app/assets/stylesheets/theme.css"
+  }
+}
+```
+
+See [Contrast Checker](https://docs.optics.rolemodel.design/?path=/docs/tools-contrast-checker--docs) for options.
+
 ## Documentation
 
 We use [Storybook](https://storybook.js.org/docs/html/get-started/introduction) as a way to provide informative and interactive documentation.

package/build_token_json.js

@@ -132,7 +132,8 @@ try {
       .filter((directoryEntry) => directoryEntry.isFile() && directoryEntry.name !== 'index.css')
       .forEach((directoryEntry) => {
         const fileContents = fs.readFileSync(`${source}/${directoryEntry.name}`)
-        const matches = fileContents.toString().match(/^\s*--.*?(?=;)/gm)
+        // Import-only files like base_tokens.css declare no variables.
+        const matches = fileContents.toString().match(/^\s*--.*?(?=;)/gm) ?? []
         matches.forEach((match) => {
           const [key, value] = match.split(':')
           variables = addToJson(splitKey(key.trim()), variables, value.trim())

package/dist/README.md

@@ -40,6 +40,8 @@ You can add this import to the top of your root level `css` file.
 @import '@rolemodel/optics/dist/css/optics.min.css'; /* If you want a single file with all the styles in it. */
 ```
 
+An OKLCH build is also available. See [OKLCH Colors](https://docs.optics.rolemodel.design/?path=/docs/overview-oklch-colors--docs).
+
 ### Importing without a compiler
 
 To use Optics without compilation, use a CDN like [jsDelivr](https://www.jsdelivr.com/) or [unpkg](https://unpkg.com/).
@@ -58,6 +60,20 @@ Add a link in your HTML head or an `@import` to the top of your root level `css`
 
 Note: You can use this method to use Optics with [CodePen](https://codepen.io/). In a CodePen project, go to `Settings > CSS`, find the section for adding external stylesheets, and add the CDN link as a resource.
 
+### Checking theme contrast
+
+After customizing your theme, add `optics-check-contrast` to your CI to check that text on every color scale step passes WCAG AA:
+
+```json
+{
+  "scripts": {
+    "check-contrast": "optics-check-contrast app/assets/stylesheets/theme.css"
+  }
+}
+```
+
+See [Contrast Checker](https://docs.optics.rolemodel.design/?path=/docs/tools-contrast-checker--docs) for options.
+
 ## Documentation
 
 We use [Storybook](https://storybook.js.org/docs/html/get-started/introduction) as a way to provide informative and interactive documentation.

package/dist/css/core/tokens/base_color_tokens.css

@@ -0,0 +1,74 @@
+:root {
+  /* Color HSLs
+    A theme comprised of a primary, neutral, warning, danger, info, and notice colors.
+  */
+
+  /* Basic Colors */
+
+  /**
+  * @tokens Basic Colors
+  * @presenter Color
+  */
+  --op-color-white: hsl(0deg 100% 100%);
+  --op-color-black: hsl(0deg 0% 0%);
+
+  /**
+  * @tokens Primary Colors
+  * @presenter Color
+  */
+  --op-color-primary-h: 216;
+  --op-color-primary-s: 58%;
+  --op-color-primary-l: 48%;
+
+  /**
+  * @tokens Neutral Colors
+  * @presenter Color
+  */
+  --op-color-neutral-h: var(--op-color-primary-h);
+  --op-color-neutral-s: 4%;
+  --op-color-neutral-l: var(--op-color-primary-l);
+
+  /**
+  * @tokens Alerts Warning Colors
+  * @presenter Color
+  */
+  --op-color-alerts-warning-h: 47;
+  --op-color-alerts-warning-s: 100%;
+  --op-color-alerts-warning-l: 61%;
+
+  /**
+  * @tokens Alerts Danger Colors
+  * @presenter Color
+  */
+  --op-color-alerts-danger-h: 0;
+  --op-color-alerts-danger-s: 99%;
+  --op-color-alerts-danger-l: 76%;
+
+  /**
+  * @tokens Alerts Info Colors
+  * @presenter Color
+  */
+  --op-color-alerts-info-h: 216;
+  --op-color-alerts-info-s: 58%;
+  --op-color-alerts-info-l: 48%;
+
+  /**
+  * @tokens Alerts Notice Colors
+  * @presenter Color
+  */
+  --op-color-alerts-notice-h: 130;
+  --op-color-alerts-notice-s: 61%;
+  --op-color-alerts-notice-l: 64%;
+
+  /* Shadows */
+
+  /**
+  * @tokens Shadows
+  * @presenter Shadow
+  */
+  --op-shadow-x-small: 0 1px 2px hsl(0deg 0% 0% / 3%), 0 1px 3px hsl(0deg 0% 0% / 15%);
+  --op-shadow-small: 0 1px 2px hsl(0deg 0% 0% / 3%), 0 2px 6px hsl(0deg 0% 0% / 15%);
+  --op-shadow-medium: 0 4px 8px hsl(0deg 0% 0% / 15%), 0 1px 3px hsl(0deg 0% 0% / 3%);
+  --op-shadow-large: 0 6px 10px hsl(0deg 0% 0% / 15%), 0 2px 3px hsl(0deg 0% 0% / 3%);
+  --op-shadow-x-large: 0 8px 12px hsl(0deg 0% 0% / 15%), 0 4px 4px hsl(0deg 0% 0% / 3%);
+}

package/dist/css/core/tokens/base_tokens.css

@@ -1,345 +1,3 @@
-:root {
-  /* Color HSLs
-    A theme comprised of a primary, neutral, warning, danger, info, and notice colors.
-  */
-
-  /* Basic Colors */
-
-  /**
-  * @tokens Basic Colors
-  * @presenter Color
-  */
-  --op-color-white: hsl(0deg 100% 100%);
-  --op-color-black: hsl(0deg 0% 0%);
-
-  /**
-  * @tokens Primary Colors
-  * @presenter Color
-  */
-  --op-color-primary-h: 216;
-  --op-color-primary-s: 58%;
-  --op-color-primary-l: 48%;
-
-  /**
-  * @tokens Neutral Colors
-  * @presenter Color
-  */
-  --op-color-neutral-h: var(--op-color-primary-h);
-  --op-color-neutral-s: 4%;
-  --op-color-neutral-l: var(--op-color-primary-l);
-
-  /**
-  * @tokens Alerts Warning Colors
-  * @presenter Color
-  */
-  --op-color-alerts-warning-h: 47;
-  --op-color-alerts-warning-s: 100%;
-  --op-color-alerts-warning-l: 61%;
-
-  /**
-  * @tokens Alerts Danger Colors
-  * @presenter Color
-  */
-  --op-color-alerts-danger-h: 0;
-  --op-color-alerts-danger-s: 99%;
-  --op-color-alerts-danger-l: 76%;
-
-  /**
-  * @tokens Alerts Info Colors
-  * @presenter Color
-  */
-  --op-color-alerts-info-h: 216;
-  --op-color-alerts-info-s: 58%;
-  --op-color-alerts-info-l: 48%;
-
-  /**
-  * @tokens Alerts Notice Colors
-  * @presenter Color
-  */
-  --op-color-alerts-notice-h: 130;
-  --op-color-alerts-notice-s: 61%;
-  --op-color-alerts-notice-l: 64%;
-
-  /**
-  * @tokens Opacities
-  * @presenter Opacity
-  */
-  --op-opacity-none: 0;
-  --op-opacity-overlay: 0.2;
-  --op-opacity-disabled: 0.4;
-  --op-opacity-half: 0.5;
-  --op-opacity-full: 1;
-
-  /*
-    Breakpoints
-    CSS does not support using variables within @media or @container queries. Environment variables are drafted but likely to not be implemented soon.
-    https://drafts.csswg.org/css-env-1/
-    https://bholmes.dev/blog/alternative-to-css-variable-media-queries/
-
-    Here is a list of breakpoints used throughout Optics:
-  */
-
-  /**
-  * @tokens Breakpoints
-  * @presenter Spacing
-  */
-  --op-breakpoint-x-small: 512px; /* vertical phone */
-  --op-breakpoint-small: 768px; /* vertical ipad */
-  --op-breakpoint-medium: 1024px; /* landscape ipad */
-  --op-breakpoint-large: 1280px; /* small laptop */
-  --op-breakpoint-x-large: 1440px; /* medium laptop */
-
-  /* Border */
-
-  /**
-  * @tokens Border Radius
-  * @presenter BorderRadius
-  */
-  --op-radius-small: 2px;
-  --op-radius-medium: 4px;
-  --op-radius-large: 8px;
-  --op-radius-x-large: 12px;
-  --op-radius-2x-large: 16px;
-  --op-radius-circle: 50%;
-  --op-radius-pill: 9999px;
-
-  /**
-  * @tokens Border Width
-  * @presenter Spacing
-  */
-  --op-border-width: 1px;
-  --op-border-width-large: 2px;
-  --op-border-width-x-large: 4px;
-
-  /**
-  * @tokens Border Color
-  * @presenter Color
-  */
-  --op-color-border: var(--op-color-neutral-plus-five);
-
-  /* E.G. box-shadow: var(--op-border-top) var(--op-color-border); */
-
-  /**
-  * @tokens Border Shadow
-  * @presenter Shadow
-  */
-  --op-border-none: 0 0 0 0;
-  --op-border-all: 0 0 0 var(--op-border-width);
-  --op-border-top: 0 calc(-1 * var(--op-border-width)) 0 0;
-  --op-border-right: var(--op-border-width) 0 0 0;
-  --op-border-bottom: 0 var(--op-border-width) 0 0;
-  --op-border-left: calc(-1 * var(--op-border-width)) 0 0 0;
-  --op-border-y: var(--op-border-top) var(--op-color-border), var(--op-border-bottom) var(--op-color-border);
-  --op-border-x: var(--op-border-left) var(--op-color-border), var(--op-border-right) var(--op-color-border);
-
-  /* Font */
-
-  /**
-  * @tokens Font Scale
-  * @presenter FontSize
-  */
-  --op-font-scale-unit: 1rem; /* 10px; */
-  --op-font-2x-small: calc(var(--op-font-scale-unit) * 1); /* 10px */
-  --op-font-x-small: calc(var(--op-font-scale-unit) * 1.2); /* 12px */
-  --op-font-small: calc(var(--op-font-scale-unit) * 1.4); /* 14px */
-  --op-font-medium: calc(var(--op-font-scale-unit) * 1.6); /* 16px */
-  --op-font-large: calc(var(--op-font-scale-unit) * 1.8); /* 18px */
-  --op-font-x-large: calc(var(--op-font-scale-unit) * 2); /* 20px */
-  --op-font-2x-large: calc(var(--op-font-scale-unit) * 2.4); /* 24px */
-  --op-font-3x-large: calc(var(--op-font-scale-unit) * 2.8); /* 28px */
-  --op-font-4x-large: calc(var(--op-font-scale-unit) * 3.2); /* 32px */
-  --op-font-5x-large: calc(var(--op-font-scale-unit) * 3.6); /* 36px */
-  --op-font-6x-large: calc(var(--op-font-scale-unit) * 4.8); /* 48px */
-
-  /**
-  * @tokens Font Weight
-  * @presenter FontWeight
-  */
-  --op-font-weight-thin: 100;
-  --op-font-weight-extra-light: 200;
-  --op-font-weight-light: 300;
-  --op-font-weight-normal: 400;
-  --op-font-weight-medium: 500;
-  --op-font-weight-semi-bold: 600;
-  --op-font-weight-bold: 700;
-  --op-font-weight-extra-bold: 800;
-  --op-font-weight-black: 900;
-
-  /**
-  * @tokens Font Family
-  * @presenter FontFamily
-  */
-  --op-font-family: 'Noto Sans', sans-serif;
-  --op-font-family-alt: 'Noto Serif', serif;
-
-  /* Text */
-
-  /**
-  * @tokens Line Height
-  * @presenter LineHeight
-  */
-  --op-line-height-none: 0;
-  --op-line-height-densest: 1;
-  --op-line-height-denser: 1.15;
-  --op-line-height-dense: 1.3;
-  --op-line-height-base: 1.5;
-  --op-line-height-loose: 1.6;
-  --op-line-height-looser: 1.7;
-  --op-line-height-loosest: 1.8;
-
-  /**
-  * @tokens Letter Spacing
-  * @presenter LetterSpacing
-  */
-  --op-letter-spacing-navigation: 0.01rem;
-  --op-letter-spacing-label: 0.04rem;
-
-  /* Transitions and Animations */
-
-  /**
-  * @tokens Transition
-  */
-  --op-transition-accordion: rotate 120ms ease-in;
-  --op-transition-accordion-content: height 300ms ease, content-visibility 300ms ease allow-discrete;
-  --op-transition-input: all 120ms ease-in;
-  --op-transition-sidebar: all 200ms ease-in-out;
-  --op-transition-modal-time: 300ms;
-  --op-transition-modal: all var(--op-transition-modal-time) ease-in;
-  --op-transition-panel: right 400ms ease-in;
-  --op-transition-tooltip: all 300ms ease-in 300ms;
-
-  /**
-  * @tokens Animation
-  * @presenter Animation
-  */
-  --op-animation-flash: rm-slide-in-out-flash 5s normal forwards;
-
-  /* Encoded Images */
-
-  /**
-  * @tokens Encoded Images
-  */
-  --op-encoded-images-dropdown-arrow-width: calc(
-    1.2 * var(--op-space-scale-unit)
-  ); /* 12px No way to string interpolate */
-
-  --op-encoded-images-dropdown-arrow: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02IDguMzc1MDFMMCAyLjM3NTAxTDEuNCAwLjk3NTAwNkw2IDUuNTc1MDFMMTAuNiAwLjk3NTAwNkwxMiAyLjM3NTAxTDYgOC4zNzUwMVoiIGZpbGw9IiMwQTBBMEIiLz4KPC9zdmc+Cg==');
-
-  /* Spacing */
-
-  /**
-  * @tokens Size Scale
-  * @presenter Spacing
-  */
-  --op-size-unit: 0.4rem; /* 4px */
-
-  /**
-  * @tokens Space Scale
-  * @presenter Spacing
-  */
-  --op-space-scale-unit: 1rem; /* 10px; */
-  --op-space-3x-small: calc(var(--op-space-scale-unit) * 0.2); /* 2px */
-  --op-space-2x-small: calc(var(--op-space-scale-unit) * 0.4); /* 4px */
-  --op-space-x-small: calc(var(--op-space-scale-unit) * 0.8); /* 8px */
-  --op-space-small: calc(var(--op-space-scale-unit) * 1.2); /* 12px */
-  --op-space-medium: calc(var(--op-space-scale-unit) * 1.6); /* 16px */
-  --op-space-large: calc(var(--op-space-scale-unit) * 2); /* 20px */
-  --op-space-x-large: calc(var(--op-space-scale-unit) * 2.4); /* 24px */
-  --op-space-2x-large: calc(var(--op-space-scale-unit) * 2.8); /* 28px */
-  --op-space-3x-large: calc(var(--op-space-scale-unit) * 4); /* 40px */
-  --op-space-4x-large: calc(var(--op-space-scale-unit) * 8); /* 80px */
-
-  /* Shadows */
-
-  /**
-  * @tokens Shadows
-  * @presenter Shadow
-  */
-  --op-shadow-x-small: 0 1px 2px hsl(0deg 0% 0% / 3%), 0 1px 3px hsl(0deg 0% 0% / 15%);
-  --op-shadow-small: 0 1px 2px hsl(0deg 0% 0% / 3%), 0 2px 6px hsl(0deg 0% 0% / 15%);
-  --op-shadow-medium: 0 4px 8px hsl(0deg 0% 0% / 15%), 0 1px 3px hsl(0deg 0% 0% / 3%);
-  --op-shadow-large: 0 6px 10px hsl(0deg 0% 0% / 15%), 0 2px 3px hsl(0deg 0% 0% / 3%);
-  --op-shadow-x-large: 0 8px 12px hsl(0deg 0% 0% / 15%), 0 4px 4px hsl(0deg 0% 0% / 3%);
-
-  /* Z Index */
-
-  /**
-  * @tokens Z-Index
-  */
-  --op-z-index-header: 500;
-  --op-z-index-footer: 500;
-  --op-z-index-sidebar: 700;
-  --op-z-index-dialog: 800;
-  --op-z-index-dialog-backdrop: 801;
-  --op-z-index-dialog-content: 802;
-  --op-z-index-dropdown: 900;
-  --op-z-index-alert-group: 950;
-  --op-z-index-tooltip: 1000;
-
-  /* Inputs */
-
-  /*
-    This should follow multiples of 4
-    https: //uxdesign.cc/baseline-grids-design-systems-ae23b5af8cec See example 8
-  */
-
-  /**
-  * @tokens Input Heights
-  * @presenter Spacing
-  */
-  --op-input-height-small: 2.8rem; /* 28px */
-  --op-input-height-medium: 3.6rem; /* 36px */
-  --op-input-height-large: 4rem; /* 40px */
-  --op-input-height-x-large: 8.4rem; /* 84px */
-
-  /**
-  * @tokens Input Focus
-  * @presenter Shadow
-  */
-  --op-input-inner-focus: inset 0 0 0 var(--op-border-width-large);
-  --op-input-outer-focus: 0 0 0 var(--op-border-width-x-large);
-  --op-input-focus-primary:
-    var(--op-input-inner-focus) var(--op-color-primary-plus-two),
-    var(--op-input-outer-focus) var(--op-color-primary-plus-five);
-  --op-input-focus-neutral:
-    var(--op-input-inner-focus) var(--op-color-neutral-plus-two),
-    var(--op-input-outer-focus) var(--op-color-neutral-plus-five);
-  --op-input-focus-danger:
-    var(--op-input-inner-focus) var(--op-color-alerts-danger-plus-two),
-    var(--op-input-outer-focus) var(--op-color-alerts-danger-plus-five);
-  --op-input-focus-warning:
-    var(--op-input-inner-focus) var(--op-color-alerts-warning-plus-two),
-    var(--op-input-outer-focus) var(--op-color-alerts-warning-plus-five);
-  --op-input-focus-info:
-    var(--op-input-inner-focus) var(--op-color-alerts-info-plus-two),
-    var(--op-input-outer-focus) var(--op-color-alerts-info-plus-five);
-  --op-input-focus-notice:
-    var(--op-input-inner-focus) var(--op-color-alerts-notice-plus-two),
-    var(--op-input-outer-focus) var(--op-color-alerts-notice-plus-five);
-}
-
-/* Animations */
-@keyframes rm-slide-in-out-flash {
-  /*
-    If an duration of 5s is set:
-    Start off the Screen
-  */
-  0% {
-    inset-inline-end: -100%;
-  }
-
-  /* Animate onto the screen for 0.5s */
-  10% {
-    inset-inline-end: var(--op-space-large);
-  }
-
-  /* Stay on the screen for 3s */
-  70% {
-    inset-inline-end: var(--op-space-large);
-  }
-
-  /* Animate off the screen for 1.5s */
-  100% {
-    inset-inline-end: -100%;
-  }
-}
+/* Kept so apps that import this file directly still get the HSL color tokens and shadows. */
+@import 'shared_tokens.css';
+@import 'base_color_tokens.css';

package/dist/css/core/tokens/index.css

@@ -1,2 +1,3 @@
-@import 'base_tokens.css';
+@import 'shared_tokens.css';
+@import 'base_color_tokens.css';
 @import 'scale_color_tokens.css';

package/dist/css/core/tokens/oklch/base_color_tokens.css

@@ -0,0 +1,74 @@
+:root {
+  /* Color OKLCH values
+    A theme comprised of a primary, neutral, warning, danger, info, and notice colors.
+  */
+
+  /* Basic Colors */
+
+  /**
+  * @tokens Basic Colors
+  * @presenter Color
+  */
+  --op-color-white: oklch(100% 0 0);
+  --op-color-black: oklch(0% 0 0);
+
+  /**
+  * @tokens Primary Colors
+  * @presenter Color
+  */
+  --op-color-primary-h: 258.5;
+  --op-color-primary-c: 0.146;
+  --op-color-primary-l: 53.9%;
+
+  /**
+  * @tokens Neutral Colors
+  * @presenter Color
+  */
+  --op-color-neutral-h: var(--op-color-primary-h);
+  --op-color-neutral-c: 0.01;
+  --op-color-neutral-l: var(--op-color-primary-l);
+
+  /**
+  * @tokens Alerts Warning Colors
+  * @presenter Color
+  */
+  --op-color-alerts-warning-h: 92.3;
+  --op-color-alerts-warning-c: 0.166;
+  --op-color-alerts-warning-l: 88.2%;
+
+  /**
+  * @tokens Alerts Danger Colors
+  * @presenter Color
+  */
+  --op-color-alerts-danger-h: 21.2;
+  --op-color-alerts-danger-c: 0.148;
+  --op-color-alerts-danger-l: 75.2%;
+
+  /**
+  * @tokens Alerts Info Colors
+  * @presenter Color
+  */
+  --op-color-alerts-info-h: 258.5;
+  --op-color-alerts-info-c: 0.146;
+  --op-color-alerts-info-l: 53.9%;
+
+  /**
+  * @tokens Alerts Notice Colors
+  * @presenter Color
+  */
+  --op-color-alerts-notice-h: 147.4;
+  --op-color-alerts-notice-c: 0.166;
+  --op-color-alerts-notice-l: 80.4%;
+
+  /* Shadows */
+
+  /**
+  * @tokens Shadows
+  * @presenter Shadow
+  */
+  --op-shadow-x-small: 0 1px 2px oklch(0% 0 0 / 3%), 0 1px 3px oklch(0% 0 0 / 15%);
+  --op-shadow-small: 0 1px 2px oklch(0% 0 0 / 3%), 0 2px 6px oklch(0% 0 0 / 15%);
+  --op-shadow-medium: 0 4px 8px oklch(0% 0 0 / 15%), 0 1px 3px oklch(0% 0 0 / 3%);
+  --op-shadow-large: 0 6px 10px oklch(0% 0 0 / 15%), 0 2px 3px oklch(0% 0 0 / 3%);
+  --op-shadow-x-large: 0 8px 12px oklch(0% 0 0 / 15%), 0 4px 4px oklch(0% 0 0 / 3%);
+}

package/dist/css/core/tokens/oklch/index.css

@@ -0,0 +1,3 @@
+@import '../shared_tokens.css';
+@import 'base_color_tokens.css';
+@import 'scale_color_tokens.css';