@octaviaflow/themes 1.0.1

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@octaviaflow/themes",
+  "description": "Themes for applying color in the OctaviaFlow Design System",
+  "version": "1.0.1",
+  "license": "Apache-2.0",
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/octaviaflow-design-system.git",
+    "directory": "packages/themes"
+  },
+  "bugs": "https://github.com/octaviaflow-design-system/issues",
+  "keywords": [
+    "octaviaflow",
+    "themes",
+    "components",
+    "react"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "ci-check": "octaviaflow-cli check \"scss/**/*.scss\" -i \"**/generated/**\" -i \"**/compat/**\"",
+    "clean": "rimraf es lib umd scss/generated scss/compat/generated",
+    "build": "bun run clean && octaviaflow-cli bundle src/index.js --name OctaviaFlowThemes && bun tasks/build.js && octaviaflow-cli check \"scss/*.scss\""
+  },
+  "dependencies": {
+    "@octaviaflow/colors": "^1.0.0",
+    "@octaviaflow/grid": "^1.0.0",
+    "@octaviaflow/layout": "^1.0.0",
+    "@octaviaflow/type": "^1.0.0",
+    "color": "^4.0.0"
+  },
+  "devDependencies": {
+    "@babel/node": "^7.24.7",
+    "@babel/preset-env": "^7.24.7",
+    "@octaviaflow/cli": "^1.0.0",
+    "@octaviaflow/cli-reporter": "^1.0.0",
+    "@octaviaflow/scss-generator": "^1.0.0",
+    "@octaviaflow/test-utils": "^1.0.0",
+    "change-case": "^4.1.1",
+    "core-js": "^3.16.0",
+    "fs-extra": "^11.0.0",
+    "js-yaml": "^3.13.0",
+    "rimraf": "^6.0.0"
+  },
+  "sideEffects": false
+}

package/scss/_component-tokens.scss

@@ -0,0 +1,10 @@
+//
+// Copyright IBM Corp. 2022, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward 'generated/button-tokens';
+@forward 'generated/tag-tokens';
+@forward 'generated/notification-tokens';

package/scss/_config.scss

@@ -0,0 +1,11 @@
+//
+// Copyright OctaviaFlow. 2025
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+$prefix: 'cds' !default;
+
+/// Specify if a fallback value should be provided for the CSS Custom Property
+$use-fallback-value: true !default;

package/scss/_theme.scss

@@ -0,0 +1,120 @@
+//
+// Copyright OctaviaFlow. 2025
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use 'sass:map';
+@use 'sass:meta';
+@use 'config';
+@use 'themes';
+
+/// Specify the fallback theme, used as a catch-all for tokens that you may not
+/// have defined in your custom theme
+$fallback: themes.$white !default;
+
+/// Specify the current theme. This can override existing tokens, or add new
+/// tokens. If you are adding new tokens, it's recommended that you set the
+/// fallback for your current theme
+$theme: () !default;
+$theme: map.merge($fallback, $theme);
+
+/// Local component tokens that can be updated with `@mixin add-component-tokens`.
+$-component-tokens: ();
+
+/// Include the CSS Custom Properties for the active theme or a given theme on
+/// a selector
+@mixin theme($active-theme: $theme, $component-tokens...) {
+  @each $token, $value in $active-theme {
+    @include -custom-property($token, $value);
+  }
+
+  @each $group in $component-tokens {
+    @each $token, $value in $group {
+      @include -custom-property($token, $value);
+    }
+  }
+
+  @each $token, $value in $-component-tokens {
+    @include -custom-property(
+      $token,
+      -resolve-token-value($active-theme, $value)
+    );
+  }
+}
+
+/// Retrieve the value for the given $token from the current $theme
+/// @param {String} $token
+@function get($token) {
+  @if map.has-key($theme, $token) {
+    @return map.get($theme, $token);
+  }
+  @error "Unable to find token: #{$token} in current $theme";
+}
+
+/// Compare two themes to see if the second theme is a superset of the first
+/// theme. In other words, this function will return true if every token in the
+/// first theme is available in the second theme and has the same value. The
+/// second theme is allowed to have additional values and it will still match.
+/// @param {Map} $a
+/// @param {Map} $b
+/// @returns {Boolean}
+@function matches($a, $b) {
+  @each $key, $value in $a {
+    @if map.has-key($b, $key) == false {
+      @return false;
+    }
+
+    @if map.get($b, $key) != $value {
+      @return false;
+    }
+  }
+
+  @return true;
+}
+
+/// Add component tokens which will be included any time the theme mixin is
+/// called
+@mixin add-component-tokens($token-map) {
+  $-component-tokens: map.merge($-component-tokens, $token-map) !global;
+}
+
+/// Determine the value from a component token that matches the given theme.
+/// This is helpful when a component token may change depending on what theme the
+/// component is being rendered in.
+@function -resolve-token-value($active-theme: $theme, $token-value) {
+  @if meta.type-of($token-value) == map and map.has-key($token-value, values) {
+    $fallback: map.get($token-value, fallback);
+    $theme-values: map.get($token-value, values);
+
+    @each $theme-value in $theme-values {
+      $theme-to-match: map.get($theme-value, theme);
+      $value: map.get($theme-value, value);
+
+      @if matches($theme-to-match, $active-theme) {
+        @return $value;
+      }
+    }
+
+    @return $fallback;
+  }
+
+  @return $token-value;
+}
+
+/// @access private
+/// @group @octaviaflow/themes
+@mixin -custom-property($name, $value) {
+  @if meta.type-of($value) == map {
+    @each $property, $property-value in $value {
+      // Only support one-level of depth for values that are maps. This is to
+      // avoid bringing properties like `breakpoints` on type tokens
+      @if type-of($property-value) != map {
+        @include -custom-property('#{$name}-#{$property}', $property-value);
+      }
+    }
+  } @else {
+    --#{config.$prefix}-#{$name}: #{$value};
+  }
+}

package/scss/_themes.scss

@@ -0,0 +1,8 @@
+//
+// Copyright OctaviaFlow. 2025
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward 'generated/themes';

package/scss/_tokens.scss

@@ -0,0 +1,8 @@
+//
+// Copyright OctaviaFlow. 2025
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward 'generated/tokens';

package/scss/_utilities.scss

@@ -0,0 +1,18 @@
+//
+// Copyright OctaviaFlow. 2025
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use 'sass:map';
+
+/// @access private
+/// @group @octaviaflow/themes
+@function merge($map, $maps...) {
+  $result: $map;
+  @each $map in $maps {
+    $result: map.merge($result, $map);
+  }
+  @return $result;
+}

package/scss/compat/_themes.scss

@@ -0,0 +1,8 @@
+//
+// Copyright OctaviaFlow. 2025
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward 'generated/themes';

package/scss/compat/_tokens.scss

@@ -0,0 +1,8 @@
+//
+// Copyright OctaviaFlow. 2025
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward 'generated/tokens';

package/scss/compat/generated/_themes.scss

@@ -0,0 +1,271 @@
+// Code generated by @octaviaflow/themes. DO NOT EDIT.
+//
+// Copyright OctaviaFlow. 2025
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+/// Token values for the white theme
+$white: (
+  active-danger: #750e13,
+  active-light-ui: #c6c6c6,
+  active-primary: #002d9c,
+  active-secondary: #6f6f6f,
+  active-tertiary: #002d9c,
+  active-ui: #c6c6c6,
+  button-separator: #e0e0e0,
+  danger-01: #da1e28,
+  danger-02: #da1e28,
+  decorative-01: #e0e0e0,
+  disabled-01: #f4f4f4,
+  disabled-02: #c6c6c6,
+  disabled-03: #8d8d8d,
+  hover-danger: #b81921,
+  hover-field: #e5e5e5,
+  hover-light-ui: #e5e5e5,
+  hover-primary: #0353e9,
+  hover-primary-text: #0043ce,
+  hover-row: #e5e5e5,
+  hover-secondary: #4c4c4c,
+  hover-selected-ui: #cacaca,
+  hover-tertiary: #0353e9,
+  hover-ui: #e5e5e5,
+  icon-01: #161616,
+  icon-02: #525252,
+  icon-03: #ffffff,
+  interactive-01: #0f62fe,
+  interactive-02: #393939,
+  interactive-03: #0f62fe,
+  interactive-04: #0f62fe,
+  inverse-01: #ffffff,
+  inverse-02: #393939,
+  inverse-focus-ui: #ffffff,
+  inverse-hover-ui: #4c4c4c,
+  inverse-link: #78a9ff,
+  inverse-support-01: #fa4d56,
+  inverse-support-02: #42be65,
+  inverse-support-03: #f1c21b,
+  inverse-support-04: #4589ff,
+  link-01: #0f62fe,
+  link-02: #0043ce,
+  overlay-01: rgba(22, 22, 22, 0.5),
+  selected-light-ui: #e0e0e0,
+  selected-ui: #e0e0e0,
+  skeleton-01: #e5e5e5,
+  skeleton-02: #c6c6c6,
+  support-01: #da1e28,
+  support-02: #198038,
+  support-03: #f1c21b,
+  support-04: #0043ce,
+  text-01: #161616,
+  text-02: #525252,
+  text-03: #a8a8a8,
+  text-04: #ffffff,
+  text-05: #6f6f6f,
+  ui-01: #f4f4f4,
+  ui-02: #ffffff,
+  ui-03: #e0e0e0,
+  ui-04: #8d8d8d,
+  ui-05: #161616,
+  ui-background: #ffffff,
+  visited-link: #8a3ffc,
+) !default;
+
+/// Token values for the g10 theme
+$g10: (
+  active-danger: #750e13,
+  active-light-ui: #c6c6c6,
+  active-primary: #002d9c,
+  active-secondary: #6f6f6f,
+  active-tertiary: #002d9c,
+  active-ui: #c6c6c6,
+  button-separator: #e0e0e0,
+  danger-01: #da1e28,
+  danger-02: #da1e28,
+  decorative-01: #e0e0e0,
+  disabled-01: #ffffff,
+  disabled-02: #c6c6c6,
+  disabled-03: #8d8d8d,
+  hover-danger: #b81921,
+  hover-field: #e5e5e5,
+  hover-light-ui: #e5e5e5,
+  hover-primary: #0353e9,
+  hover-primary-text: #0043ce,
+  hover-row: #e5e5e5,
+  hover-secondary: #4c4c4c,
+  hover-selected-ui: #cacaca,
+  hover-tertiary: #0353e9,
+  hover-ui: #e5e5e5,
+  icon-01: #161616,
+  icon-02: #525252,
+  icon-03: #ffffff,
+  interactive-01: #0f62fe,
+  interactive-02: #393939,
+  interactive-03: #0f62fe,
+  interactive-04: #0f62fe,
+  inverse-01: #ffffff,
+  inverse-02: #393939,
+  inverse-focus-ui: #ffffff,
+  inverse-hover-ui: #4c4c4c,
+  inverse-link: #78a9ff,
+  inverse-support-01: #fa4d56,
+  inverse-support-02: #42be65,
+  inverse-support-03: #f1c21b,
+  inverse-support-04: #4589ff,
+  link-01: #0f62fe,
+  link-02: #0043ce,
+  overlay-01: rgba(22, 22, 22, 0.5),
+  selected-light-ui: #e0e0e0,
+  selected-ui: #e0e0e0,
+  skeleton-01: #e5e5e5,
+  skeleton-02: #c6c6c6,
+  support-01: #da1e28,
+  support-02: #198038,
+  support-03: #f1c21b,
+  support-04: #0043ce,
+  text-01: #161616,
+  text-02: #525252,
+  text-03: #a8a8a8,
+  text-04: #ffffff,
+  text-05: #6f6f6f,
+  ui-01: #ffffff,
+  ui-02: #f4f4f4,
+  ui-03: #e0e0e0,
+  ui-04: #8d8d8d,
+  ui-05: #161616,
+  ui-background: #f4f4f4,
+  visited-link: #8a3ffc,
+) !default;
+
+/// Token values for the g90 theme
+$g90: (
+  active-danger: #750e13,
+  active-light-ui: #8d8d8d,
+  active-primary: #002d9c,
+  active-secondary: #393939,
+  active-tertiary: #c6c6c6,
+  active-ui: #6f6f6f,
+  button-separator: #161616,
+  danger-01: #da1e28,
+  danger-02: #ff8389,
+  decorative-01: #6f6f6f,
+  disabled-01: #393939,
+  disabled-02: #6f6f6f,
+  disabled-03: #a8a8a8,
+  hover-danger: #b81921,
+  hover-field: #4c4c4c,
+  hover-light-ui: #656565,
+  hover-primary: #0353e9,
+  hover-primary-text: #a6c8ff,
+  hover-row: #4c4c4c,
+  hover-secondary: #606060,
+  hover-selected-ui: #656565,
+  hover-tertiary: #f4f4f4,
+  hover-ui: #4c4c4c,
+  icon-01: #f4f4f4,
+  icon-02: #c6c6c6,
+  icon-03: #ffffff,
+  interactive-01: #0f62fe,
+  interactive-02: #6f6f6f,
+  interactive-03: #ffffff,
+  interactive-04: #4589ff,
+  inverse-01: #161616,
+  inverse-02: #f4f4f4,
+  inverse-focus-ui: #0f62fe,
+  inverse-hover-ui: #e5e5e5,
+  inverse-link: #0f62fe,
+  inverse-support-01: #da1e28,
+  inverse-support-02: #24a148,
+  inverse-support-03: #f1c21b,
+  inverse-support-04: #0f62fe,
+  link-01: #78a9ff,
+  link-02: #a6c8ff,
+  overlay-01: rgba(0, 0, 0, 0.65),
+  selected-light-ui: #6f6f6f,
+  selected-ui: #525252,
+  skeleton-01: #353535,
+  skeleton-02: #525252,
+  support-01: #ff8389,
+  support-02: #42be65,
+  support-03: #f1c21b,
+  support-04: #4589ff,
+  text-01: #f4f4f4,
+  text-02: #c6c6c6,
+  text-03: #6f6f6f,
+  text-04: #ffffff,
+  text-05: #8d8d8d,
+  ui-01: #393939,
+  ui-02: #525252,
+  ui-03: #525252,
+  ui-04: #8d8d8d,
+  ui-05: #f4f4f4,
+  ui-background: #262626,
+  visited-link: #be95ff,
+) !default;
+
+/// Token values for the g100 theme
+$g100: (
+  active-danger: #750e13,
+  active-light-ui: #6f6f6f,
+  active-primary: #002d9c,
+  active-secondary: #393939,
+  active-tertiary: #c6c6c6,
+  active-ui: #525252,
+  button-separator: #161616,
+  danger-01: #da1e28,
+  danger-02: #fa4d56,
+  decorative-01: #525252,
+  disabled-01: #262626,
+  disabled-02: #525252,
+  disabled-03: #8d8d8d,
+  hover-danger: #b81921,
+  hover-field: #353535,
+  hover-light-ui: #4c4c4c,
+  hover-primary: #0353e9,
+  hover-primary-text: #a6c8ff,
+  hover-row: #353535,
+  hover-secondary: #606060,
+  hover-selected-ui: #4c4c4c,
+  hover-tertiary: #f4f4f4,
+  hover-ui: #353535,
+  icon-01: #f4f4f4,
+  icon-02: #c6c6c6,
+  icon-03: #ffffff,
+  interactive-01: #0f62fe,
+  interactive-02: #6f6f6f,
+  interactive-03: #ffffff,
+  interactive-04: #4589ff,
+  inverse-01: #161616,
+  inverse-02: #f4f4f4,
+  inverse-focus-ui: #0f62fe,
+  inverse-hover-ui: #e5e5e5,
+  inverse-link: #0f62fe,
+  inverse-support-01: #da1e28,
+  inverse-support-02: #24a148,
+  inverse-support-03: #f1c21b,
+  inverse-support-04: #0f62fe,
+  link-01: #78a9ff,
+  link-02: #a6c8ff,
+  overlay-01: rgba(0, 0, 0, 0.65),
+  selected-light-ui: #525252,
+  selected-ui: #393939,
+  skeleton-01: #353535,
+  skeleton-02: #525252,
+  support-01: #fa4d56,
+  support-02: #42be65,
+  support-03: #f1c21b,
+  support-04: #4589ff,
+  text-01: #f4f4f4,
+  text-02: #c6c6c6,
+  text-03: #6f6f6f,
+  text-04: #ffffff,
+  text-05: #8d8d8d,
+  ui-01: #262626,
+  ui-02: #393939,
+  ui-03: #393939,
+  ui-04: #6f6f6f,
+  ui-05: #f4f4f4,
+  ui-background: #161616,
+  visited-link: #be95ff,
+) !default;