@octaviaflow/themes 1.0.1 → 2.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@octaviaflow/themes",
   "description": "Themes for applying color in the OctaviaFlow Design System",
-  "version": "1.0.1",
+  "version": "2.0.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -23,25 +23,24 @@
   "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\""
+    "build": "bun run clean && octaviaflow-cli bundle src/index.js --name OctaviaFlowThemes && bun tasks/build.js && octaviaflow-cli check \"scss/*.scss\"",
+    "test": "bun test ."
   },
   "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"
+    "@octaviaflow/colors": "^2.0.0",
+    "@octaviaflow/grid": "^2.0.0",
+    "@octaviaflow/layout": "^2.0.0",
+    "@octaviaflow/type": "^2.0.0",
+    "chalk": "4.1.2",
+    "color": "^4.0.0",
+    "ora": "5.4.1"
   },
   "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",
+    "@octaviaflow/cli": "^2.0.0",
+    "@octaviaflow/scss-generator": "^2.0.0",
+    "@octaviaflow/test-utils": "^2.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"
   },

package/scss/generated/_button-tokens.scss

@@ -0,0 +1,115 @@
+// 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.
+//
+
+@use 'sass:map';
+
+$button-danger-active: (
+  white-theme: #750e13,
+  g-10: #750e13,
+  g-90: #750e13,
+  g-100: #750e13,
+) !default;
+
+$button-danger-hover: (
+  white-theme: #b81921,
+  g-10: #b81921,
+  g-90: #b81921,
+  g-100: #b81921,
+) !default;
+
+$button-danger-primary: (
+  white-theme: #da1e28,
+  g-10: #da1e28,
+  g-90: #da1e28,
+  g-100: #da1e28,
+) !default;
+
+$button-danger-secondary: (
+  white-theme: #da1e28,
+  g-10: #da1e28,
+  g-90: #ff8389,
+  g-100: #fa4d56,
+) !default;
+
+$button-disabled: (
+  white-theme: #c6c6c6,
+  g-10: #c6c6c6,
+  g-90: rgb(141 141 141 / 30%),
+  g-100: rgb(141 141 141 / 30%),
+) !default;
+
+$button-primary: (
+  white-theme: #0f62fe,
+  g-10: #0f62fe,
+  g-90: #0f62fe,
+  g-100: #0f62fe,
+) !default;
+
+$button-primary-active: (
+  white-theme: #002d9c,
+  g-10: #002d9c,
+  g-90: #002d9c,
+  g-100: #002d9c,
+) !default;
+
+$button-primary-hover: (
+  white-theme: #0050e6,
+  g-10: #0050e6,
+  g-90: #0050e6,
+  g-100: #0050e6,
+) !default;
+
+$button-secondary: (
+  white-theme: #393939,
+  g-10: #393939,
+  g-90: #6f6f6f,
+  g-100: #6f6f6f,
+) !default;
+
+$button-secondary-active: (
+  white-theme: #6f6f6f,
+  g-10: #6f6f6f,
+  g-90: #393939,
+  g-100: #393939,
+) !default;
+
+$button-secondary-hover: (
+  white-theme: #474747,
+  g-10: #474747,
+  g-90: #5e5e5e,
+  g-100: #5e5e5e,
+) !default;
+
+$button-separator: (
+  fallback: #e0e0e0,
+  white-theme: #e0e0e0,
+  g-10: #e0e0e0,
+  g-90: #161616,
+  g-100: #161616,
+) !default;
+
+$button-tertiary: (
+  white-theme: #0f62fe,
+  g-10: #0f62fe,
+  g-90: #ffffff,
+  g-100: #ffffff,
+) !default;
+
+$button-tertiary-active: (
+  white-theme: #002d9c,
+  g-10: #002d9c,
+  g-90: #c6c6c6,
+  g-100: #c6c6c6,
+) !default;
+
+$button-tertiary-hover: (
+  white-theme: #0050e6,
+  g-10: #0050e6,
+  g-90: #f4f4f4,
+  g-100: #f4f4f4,
+) !default;

package/scss/generated/_content-switcher-tokens.scss

@@ -0,0 +1,30 @@
+// 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.
+//
+
+@use 'sass:map';
+
+$content-switcher-background: (
+  white-theme: #e0e0e0,
+  g-10: #e0e0e0,
+  g-90: rgba(0, 0, 0, 0),
+  g-100: rgba(0, 0, 0, 0),
+) !default;
+
+$content-switcher-background-hover: (
+  white-theme: #d1d1d1,
+  g-10: #d1d1d1,
+  g-90: rgba(141, 141, 141, 0.12),
+  g-100: rgba(141, 141, 141, 0.12),
+) !default;
+
+$content-switcher-selected: (
+  white-theme: #ffffff,
+  g-10: #ffffff,
+  g-90: rgba(141, 141, 141, 0.24),
+  g-100: rgba(141, 141, 141, 0.24),
+) !default;

package/scss/generated/_notification-tokens.scss

@@ -0,0 +1,77 @@
+// 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.
+//
+
+@use 'sass:map';
+
+$notification-action-hover: (
+  white-theme: #ffffff,
+  g-10: #ffffff,
+) !default;
+
+$notification-action-tertiary-inverse: (
+  white-theme: #ffffff,
+  g-10: #ffffff,
+  g-90: #0f62fe,
+  g-100: #0f62fe,
+) !default;
+
+$notification-action-tertiary-inverse-active: (
+  white-theme: #c6c6c6,
+  g-10: #c6c6c6,
+  g-90: #002d9c,
+  g-100: #002d9c,
+) !default;
+
+$notification-action-tertiary-inverse-hover: (
+  white-theme: #f4f4f4,
+  g-10: #f4f4f4,
+  g-90: #0050e6,
+  g-100: #0050e6,
+) !default;
+
+$notification-action-tertiary-inverse-text: (
+  white-theme: #161616,
+  g-10: #161616,
+  g-90: #ffffff,
+  g-100: #ffffff,
+) !default;
+
+$notification-action-tertiary-inverse-text-on-color-disabled: (
+  white-theme: rgba(255, 255, 255, 0.25),
+  g-10: rgba(255, 255, 255, 0.25),
+  g-90: #8d8d8d,
+  g-100: #8d8d8d,
+) !default;
+
+$notification-background-error: (
+  white-theme: #fff1f1,
+  g-10: #fff1f1,
+  g-90: #393939,
+  g-100: #262626,
+) !default;
+
+$notification-background-info: (
+  white-theme: #edf5ff,
+  g-10: #edf5ff,
+  g-90: #393939,
+  g-100: #262626,
+) !default;
+
+$notification-background-success: (
+  white-theme: #defbe6,
+  g-10: #defbe6,
+  g-90: #393939,
+  g-100: #262626,
+) !default;
+
+$notification-background-warning: (
+  white-theme: #fcf4d6,
+  g-10: #fcf4d6,
+  g-90: #393939,
+  g-100: #262626,
+) !default;

package/scss/generated/_status-tokens.scss

@@ -0,0 +1,75 @@
+// 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.
+//
+
+@use 'sass:map';
+
+$status-accessibility-background: (
+  white-theme: #ffffff,
+  g-10: #ffffff,
+  g-90: #161616,
+  g-100: #161616,
+) !default;
+
+$status-blue: (
+  white-theme: #0043ce,
+  g-10: #0043ce,
+  g-90: #4589ff,
+  g-100: #4589ff,
+) !default;
+
+$status-gray: (
+  white-theme: #6f6f6f,
+  g-10: #6f6f6f,
+  g-90: #8d8d8d,
+  g-100: #8d8d8d,
+) !default;
+
+$status-green: (
+  white-theme: #24a148,
+  g-10: #24a148,
+  g-90: #42be65,
+  g-100: #42be65,
+) !default;
+
+$status-orange: (
+  white-theme: #ff832b,
+  g-10: #ff832b,
+  g-90: #ff832b,
+  g-100: #ff832b,
+) !default;
+
+$status-orange-outline: (
+  white-theme: #ba4e00,
+  g-10: #ba4e00,
+) !default;
+
+$status-purple: (
+  white-theme: #8a3ffc,
+  g-10: #8a3ffc,
+  g-90: #a56eff,
+  g-100: #a56eff,
+) !default;
+
+$status-red: (
+  white-theme: #da1e28,
+  g-10: #da1e28,
+  g-90: #fa4d56,
+  g-100: #fa4d56,
+) !default;
+
+$status-yellow: (
+  white-theme: #f1c21b,
+  g-10: #f1c21b,
+  g-90: #f1c21b,
+  g-100: #f1c21b,
+) !default;
+
+$status-yellow-outline: (
+  white-theme: #8e6a00,
+  g-10: #8e6a00,
+) !default;

package/scss/generated/_tag-tokens.scss

@@ -0,0 +1,289 @@
+// 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.
+//
+
+@use 'sass:map';
+
+$tag-background-blue: (
+  white-theme: #d0e2ff,
+  g-10: #d0e2ff,
+  g-90: #0043ce,
+  g-100: #0043ce,
+) !default;
+
+$tag-background-cool-gray: (
+  white-theme: #dde1e6,
+  g-10: #dde1e6,
+  g-90: #4d5358,
+  g-100: #4d5358,
+) !default;
+
+$tag-background-cyan: (
+  white-theme: #bae6ff,
+  g-10: #bae6ff,
+  g-90: #00539a,
+  g-100: #00539a,
+) !default;
+
+$tag-background-gray: (
+  white-theme: #e0e0e0,
+  g-10: #e0e0e0,
+  g-90: #525252,
+  g-100: #525252,
+) !default;
+
+$tag-background-green: (
+  white-theme: #a7f0ba,
+  g-10: #a7f0ba,
+  g-90: #0e6027,
+  g-100: #0e6027,
+) !default;
+
+$tag-background-magenta: (
+  white-theme: #ffd6e8,
+  g-10: #ffd6e8,
+  g-90: #9f1853,
+  g-100: #9f1853,
+) !default;
+
+$tag-background-purple: (
+  white-theme: #e8daff,
+  g-10: #e8daff,
+  g-90: #6929c4,
+  g-100: #6929c4,
+) !default;
+
+$tag-background-red: (
+  white-theme: #ffd7d9,
+  g-10: #ffd7d9,
+  g-90: #a2191f,
+  g-100: #a2191f,
+) !default;
+
+$tag-background-teal: (
+  white-theme: #9ef0f0,
+  g-10: #9ef0f0,
+  g-90: #005d5d,
+  g-100: #005d5d,
+) !default;
+
+$tag-background-warm-gray: (
+  white-theme: #e5e0df,
+  g-10: #e5e0df,
+  g-90: #565151,
+  g-100: #565151,
+) !default;
+
+$tag-border-blue: (
+  white-theme: #78a9ff,
+  g-10: #78a9ff,
+  g-90: #4589ff,
+  g-100: #4589ff,
+) !default;
+
+$tag-border-cool-gray: (
+  white-theme: #a2a9b0,
+  g-10: #a2a9b0,
+  g-90: #878d96,
+  g-100: #878d96,
+) !default;
+
+$tag-border-cyan: (
+  white-theme: #33b1ff,
+  g-10: #33b1ff,
+  g-90: #1192e8,
+  g-100: #1192e8,
+) !default;
+
+$tag-border-gray: (
+  white-theme: #a8a8a8,
+  g-10: #a8a8a8,
+  g-90: #8d8d8d,
+  g-100: #8d8d8d,
+) !default;
+
+$tag-border-green: (
+  white-theme: #42be65,
+  g-10: #42be65,
+  g-90: #24a148,
+  g-100: #24a148,
+) !default;
+
+$tag-border-magenta: (
+  white-theme: #ff7eb6,
+  g-10: #ff7eb6,
+  g-90: #ee5396,
+  g-100: #ee5396,
+) !default;
+
+$tag-border-purple: (
+  white-theme: #be95ff,
+  g-10: #be95ff,
+  g-90: #a56eff,
+  g-100: #a56eff,
+) !default;
+
+$tag-border-red: (
+  white-theme: #ff8389,
+  g-10: #ff8389,
+  g-90: #fa4d56,
+  g-100: #fa4d56,
+) !default;
+
+$tag-border-teal: (
+  white-theme: #08bdba,
+  g-10: #08bdba,
+  g-90: #009d9a,
+  g-100: #009d9a,
+) !default;
+
+$tag-border-warm-gray: (
+  white-theme: #ada8a8,
+  g-10: #ada8a8,
+  g-90: #8f8b8b,
+  g-100: #8f8b8b,
+) !default;
+
+$tag-color-blue: (
+  white-theme: #0043ce,
+  g-10: #0043ce,
+  g-90: #d0e2ff,
+  g-100: #d0e2ff,
+) !default;
+
+$tag-color-cool-gray: (
+  white-theme: #121619,
+  g-10: #121619,
+  g-90: #f2f4f8,
+  g-100: #f2f4f8,
+) !default;
+
+$tag-color-cyan: (
+  white-theme: #00539a,
+  g-10: #00539a,
+  g-90: #bae6ff,
+  g-100: #bae6ff,
+) !default;
+
+$tag-color-gray: (
+  white-theme: #161616,
+  g-10: #161616,
+  g-90: #f4f4f4,
+  g-100: #f4f4f4,
+) !default;
+
+$tag-color-green: (
+  white-theme: #0e6027,
+  g-10: #0e6027,
+  g-90: #a7f0ba,
+  g-100: #a7f0ba,
+) !default;
+
+$tag-color-magenta: (
+  white-theme: #9f1853,
+  g-10: #9f1853,
+  g-90: #ffd6e8,
+  g-100: #ffd6e8,
+) !default;
+
+$tag-color-purple: (
+  white-theme: #6929c4,
+  g-10: #6929c4,
+  g-90: #e8daff,
+  g-100: #e8daff,
+) !default;
+
+$tag-color-red: (
+  white-theme: #a2191f,
+  g-10: #a2191f,
+  g-90: #ffd7d9,
+  g-100: #ffd7d9,
+) !default;
+
+$tag-color-teal: (
+  white-theme: #005d5d,
+  g-10: #005d5d,
+  g-90: #9ef0f0,
+  g-100: #9ef0f0,
+) !default;
+
+$tag-color-warm-gray: (
+  white-theme: #171414,
+  g-10: #171414,
+  g-90: #f7f3f2,
+  g-100: #f7f3f2,
+) !default;
+
+$tag-hover-blue: (
+  white-theme: #b8d3ff,
+  g-10: #b8d3ff,
+  g-90: #0053ff,
+  g-100: #0053ff,
+) !default;
+
+$tag-hover-cool-gray: (
+  white-theme: #cdd3da,
+  g-10: #cdd3da,
+  g-90: #5d646a,
+  g-100: #5d646a,
+) !default;
+
+$tag-hover-cyan: (
+  white-theme: #99daff,
+  g-10: #99daff,
+  g-90: #0066bd,
+  g-100: #0066bd,
+) !default;
+
+$tag-hover-gray: (
+  white-theme: #d1d1d1,
+  g-10: #d1d1d1,
+  g-90: #636363,
+  g-100: #636363,
+) !default;
+
+$tag-hover-green: (
+  white-theme: #74e792,
+  g-10: #74e792,
+  g-90: #11742f,
+  g-100: #11742f,
+) !default;
+
+$tag-hover-magenta: (
+  white-theme: #ffbdda,
+  g-10: #ffbdda,
+  g-90: #bf1d63,
+  g-100: #bf1d63,
+) !default;
+
+$tag-hover-purple: (
+  white-theme: #dcc7ff,
+  g-10: #dcc7ff,
+  g-90: #7c3dd6,
+  g-100: #7c3dd6,
+) !default;
+
+$tag-hover-red: (
+  white-theme: #ffc2c5,
+  g-10: #ffc2c5,
+  g-90: #c21e25,
+  g-100: #c21e25,
+) !default;
+
+$tag-hover-teal: (
+  white-theme: #57e5e5,
+  g-10: #57e5e5,
+  g-90: #007070,
+  g-100: #007070,
+) !default;
+
+$tag-hover-warm-gray: (
+  white-theme: #d8d0cf,
+  g-10: #d8d0cf,
+  g-90: #696363,
+  g-100: #696363,
+) !default;