@rothko-ui/tokens 1.4.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 rothko-ui
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,29 @@
+# @rothko-ui/tokens
+
+Welcome to the `@rothko-ui/tokens` package. This package provides style tokens for the Rothko-UI component library, ensuring consistent theming and styling options for internal Rothko-UI components.
+
+## Overview
+
+The `@rothko-ui/tokens` package uses `style-dictionary` to manage and generate design tokens. These tokens play a crucial role in maintaining a unified design and theming across different components within the Rothko-UI library.
+
+## Development
+
+The package comes with several scripts to aid in development:
+
+- `yarn build`: Generates the tokens in the form of CSS files.
+- `yarn clean`: Removes generated files.
+- `yarn lint`: Lints the source files.
+
+## Exports
+
+The package primarily exports CSS files containing the design tokens:
+
+- CSS variables for different themes: `build/*.css`
+
+## Licensing
+
+The `@rothko-ui/tokens` package is licensed under the terms of the [LICENSE.txt](LICENSE.txt) file. Please refer to it for detailed information.
+
+## Questions & Support
+
+For questions, clarifications, or support regarding the `@rothko-ui/tokens` package, please raise an issue in the [repository](https://github.com/luxo-ai/rothko-ui) or contact the author at `luxo@rothko-ui.com`.

package/build/tokens.css

@@ -0,0 +1,414 @@
+/**
+ * Do not edit directly
+ * Generated on Sat, 22 Feb 2025 20:45:30 GMT
+ */
+
+:root, :root .light {
+  --rothko-primary-100: #000000;
+  --rothko-primary-200: #000000;
+  --rothko-primary-300: #000000;
+  --rothko-primary-400: #000000;
+  --rothko-primary-500: #000000;
+  --rothko-primary-600: #000000;
+  --rothko-primary-700: #000000;
+  --rothko-primary-800: #000000;
+  --rothko-primary-900: #000000;
+  --rothko-primary: #000000;
+  --rothko-primary-foreground: #FFF;
+  --rothko-secondary-100: #FFDFF9;
+  --rothko-secondary-200: #FFBFF8;
+  --rothko-secondary-300: #FFA0FC;
+  --rothko-secondary-400: #F888FF;
+  --rothko-secondary-500: #ea61ff;
+  --rothko-secondary-600: #BB46DB;
+  --rothko-secondary-700: #9030B7;
+  --rothko-secondary-800: #681E93;
+  --rothko-secondary-900: #4B127A;
+  --rothko-secondary: #ea61ff;
+  --rothko-secondary-foreground: #fff;
+  --rothko-success-100: #DFFFD9;
+  --rothko-success-200: #B8FFB3;
+  --rothko-success-300: #8DFF8F;
+  --rothko-success-400: #70FF80;
+  --rothko-success-500: #41ff69;
+  --rothko-success-600: #2FDB64;
+  --rothko-success-700: #20B75D;
+  --rothko-success-800: #149353;
+  --rothko-success-900: #0C7A4D;
+  --rothko-success: #41ff69;
+  --rothko-success-foreground: #000;
+  --rothko-info-100: #D8D2FE;
+  --rothko-info-200: #B1A5FE;
+  --rothko-info-300: #8978FD;
+  --rothko-info-400: #6957FB;
+  --rothko-info-500: #3620f9;
+  --rothko-info-600: #2817D6;
+  --rothko-info-700: #1D10B3;
+  --rothko-info-800: #130A90;
+  --rothko-info-900: #0C0677;
+  --rothko-info: #3620f9;
+  --rothko-info-foreground: #FFF;
+  --rothko-warning-100: #FEFBCE;
+  --rothko-warning-200: #FEF69E;
+  --rothko-warning-300: #FEF06E;
+  --rothko-warning-400: #FEEA4A;
+  --rothko-warning-500: #fee10e;
+  --rothko-warning-600: #DABE0A;
+  --rothko-warning-700: #B69D07;
+  --rothko-warning-800: #937C04;
+  --rothko-warning-900: #796502;
+  --rothko-warning: #fee10e;
+  --rothko-warning-foreground: #000;
+  --rothko-danger-100: #FFE0CF;
+  --rothko-danger-200: #FFB9A0;
+  --rothko-danger-300: #FF8971;
+  --rothko-danger-400: #FF5D4E;
+  --rothko-danger-500: #ff1313;
+  --rothko-danger-600: #DB0D1F;
+  --rothko-danger-700: #B70927;
+  --rothko-danger-800: #93062A;
+  --rothko-danger-900: #7A032C;
+  --rothko-danger: #ff1313;
+  --rothko-danger-foreground: #FFF;
+  --rothko-background: #fff;
+  --rothko-border: #000;
+  --rothko-foreground: #000;
+  --rothko-icon-background: #000;
+  --rothko-icon-border: #000;
+  --rothko-slider-handle-border: #262626;
+  --rothko-slider-handle-background: #262626;
+  --rothko-slider-range-background: #3c54ff;
+  --rothko-slider-track-background: rgb(0 0 0 / 8%);
+  --rothko-dropdown-background: #FFF;
+  --rothko-dropdown-multiselect-foreground: #3620f9;
+  --rothko-dropdown-multiselect-border: #3620f9;
+  --rothko-dropdown-multiselect-background: #FFF;
+  --rothko-dropdown-option-background-focus: #EEE;
+  --rothko-tabs-border: #000;
+  --rothko-tabs-background: transparent;
+  --rothko-tabs-foreground: #000;
+  --rothko-radio-border: #DEE7F5;
+  --rothko-radio-background: #EBF2FB;
+  --rothko-radio-background-focus: #3c54ff;
+  --rothko-table-background: #fff;
+  --rothko-table-header-background: #f8f9fa;
+  --rothko-table-row-border: #f3f3f5;
+  --rothko-table-row-minimized-background: #f8f9fa;
+  --rothko-toast-foreground: #fff;
+  --rothko-toast-background: #000;
+  --rothko-toast-life-filled-background: #ff0000;
+  --rothko-toast-life-empty-background: #e1594e;
+  --rothko-accordion-border: #000;
+  --rothko-accordion-background: #f8f9fa;
+  --rothko-checkbox-background: #DEE7F5;
+  --rothko-checkbox-background-focus: #3c54ff;
+  --rothko-checkbox-icon-background: #fff;
+  --rothko-input-background: rgba(188, 199, 223, 0.24);
+  --rothko-input-foreground: #000;
+  --rothko-skeleton-background: #DEE7F5;
+  --rothko-skeleton-foreground: #EBF2FB;
+  --rothko-switch-border: #d9d9d9;
+  --rothko-switch-background: #dee7f5;
+  --rothko-switch-background-focus: #41ff69;
+  --rothko-switch-handle-background: #fff;
+  --rothko-typography-link-color: #492bfb;
+  --rothko-typography-body-color: #000;
+  --rothko-typography-heading-color: #000;
+  --rothko-typography-code-color: #5327fb;
+}
+
+:root, :root .light {
+  fill: var(--rothko-icon-background, #000)
+}
+
+/**
+ * Do not edit directly
+ * Generated on Sat, 22 Feb 2025 20:45:30 GMT
+ */
+
+:root .dark {
+  --rothko-primary-100: #FFFFFF;
+  --rothko-primary-200: #FFFFFF;
+  --rothko-primary-300: #FFFFFF;
+  --rothko-primary-400: #FFFFFF;
+  --rothko-primary-500: #FFFFFF;
+  --rothko-primary-600: #FFFFFF;
+  --rothko-primary-700: #FFFFFF;
+  --rothko-primary-800: #FFFFFF;
+  --rothko-primary-900: #FFFFFF;
+  --rothko-primary: #FFFFFF;
+  --rothko-primary-foreground: #000;
+  --rothko-secondary-100: #FFE3F9;
+  --rothko-secondary-200: #FFC7F9;
+  --rothko-secondary-300: #FFABFD;
+  --rothko-secondary-400: #F995FF;
+  --rothko-secondary-500: #ec73ff;
+  --rothko-secondary-600: #BE54DB;
+  --rothko-secondary-700: #9239B7;
+  --rothko-secondary-800: #6A2493;
+  --rothko-secondary-900: #4D167A;
+  --rothko-secondary: #ec73ff;
+  --rothko-secondary-foreground: #000;
+  --rothko-success-100: #E1FFDB;
+  --rothko-success-200: #BCFFB7;
+  --rothko-success-300: #93FF95;
+  --rothko-success-400: #78FF87;
+  --rothko-success-500: #4bff71;
+  --rothko-success-600: #36DB69;
+  --rothko-success-700: #25B760;
+  --rothko-success-800: #179355;
+  --rothko-success-900: #0E7A4E;
+  --rothko-success: #4bff71;
+  --rothko-success-foreground: #000;
+  --rothko-info-100: #DAD4FF;
+  --rothko-info-200: #B4A9FF;
+  --rothko-info-300: #8E7FFF;
+  --rothko-info-400: #705FFF;
+  --rothko-info-500: #3f2aff;
+  --rothko-info-600: #2F1EDB;
+  --rothko-info-700: #2115B7;
+  --rothko-info-800: #160D93;
+  --rothko-info-900: #0E087A;
+  --rothko-info: #3f2aff;
+  --rothko-info-foreground: #FFF;
+  --rothko-warning-100: #FEFBCE;
+  --rothko-warning-200: #FEF69E;
+  --rothko-warning-300: #FEF06E;
+  --rothko-warning-400: #FEEA4A;
+  --rothko-warning-500: #fee10e;
+  --rothko-warning-600: #DABE0A;
+  --rothko-warning-700: #B69D07;
+  --rothko-warning-800: #937C04;
+  --rothko-warning-900: #796502;
+  --rothko-warning: #fee10e;
+  --rothko-warning-foreground: #000;
+  --rothko-danger-100: #FFE2D3;
+  --rothko-danger-200: #FFBFA8;
+  --rothko-danger-300: #FF937D;
+  --rothko-danger-400: #FF6B5D;
+  --rothko-danger-500: #ff2727;
+  --rothko-danger-600: #DB1C2D;
+  --rothko-danger-700: #B71330;
+  --rothko-danger-800: #930C2F;
+  --rothko-danger-900: #7A072F;
+  --rothko-danger: #ff2727;
+  --rothko-danger-foreground: #FFF;
+  --rothko-background: #141414;
+  --rothko-border: #FFF;
+  --rothko-foreground: #FFF;
+  --rothko-icon-background: #FFF;
+  --rothko-icon-border: #FFF;
+  --rothko-slider-handle-border: #2d3035;
+  --rothko-slider-handle-background: #2d3035;
+  --rothko-slider-range-background: #4d63ff;
+  --rothko-slider-track-background: rgb(255 255 255 / 8%);
+  --rothko-dropdown-background: #141414;
+  --rothko-dropdown-multiselect-foreground: #c42317;
+  --rothko-dropdown-multiselect-border: #c42317;
+  --rothko-dropdown-multiselect-background: #000;
+  --rothko-dropdown-option-background-focus: #3B3B3B;
+  --rothko-tabs-border: #FFF;
+  --rothko-tabs-background: transparent;
+  --rothko-tabs-foreground: #FFF;
+  --rothko-radio-border: #6b6b6b;
+  --rothko-radio-background: #2D3035;
+  --rothko-radio-background-focus: #2D3035;
+  --rothko-table-background: #080808;
+  --rothko-table-header-background: #141414;
+  --rothko-table-row-border: #000;
+  --rothko-table-row-minimized-background: #141414;
+  --rothko-toast-foreground: #FFF;
+  --rothko-toast-background: #141414;
+  --rothko-toast-life-filled-background: #e93c2f;
+  --rothko-toast-life-empty-background: transparent;
+  --rothko-accordion-border: #FFF;
+  --rothko-accordion-background: #141414;
+  --rothko-checkbox-background: #DEE7F5;
+  --rothko-checkbox-background-focus: #4d63ff;
+  --rothko-checkbox-icon-background: #fff;
+  --rothko-input-background: rgba(188, 199, 223, 0.24);
+  --rothko-input-foreground: #FFF;
+  --rothko-skeleton-background: #DEE7F5;
+  --rothko-skeleton-foreground: #EBF2FB;
+  --rothko-switch-border: #494949;
+  --rothko-switch-background: #2d3035;
+  --rothko-switch-background-focus: #4bff71;
+  --rothko-switch-handle-background: #757985;
+  --rothko-typography-link-color: #e93c2f;
+  --rothko-typography-body-color: #FFF;
+  --rothko-typography-heading-color: #FFF;
+  --rothko-typography-code-color: #ec73ff;
+}
+
+:root .dark {
+  fill: var(--rothko-icon-background, #000)
+}
+
+/**
+ * Do not edit directly
+ * Generated on Sat, 22 Feb 2025 20:45:30 GMT
+ */
+
+:root {
+  --rothko-font-family-bold: 'Helvetica';
+  --rothko-font-family-italic: 'Helvetica';
+  --rothko-font-family-light: 'Helvetica';
+  --rothko-font-family-regular: 'Helvetica';
+  --rothko-font-family-heading: 'Helvetica';
+  --rothko-font-family-code: monospace;
+  --rothko-spacing-unit: 4;
+  --rothko-disabled-opacity: 0.5;
+  --rothko-divider-weight: 1px;
+  --rothko-font-size-body: 1rem;
+  --rothko-font-size-h1: 2.5rem;
+  --rothko-font-size-h2: 2.25rem;
+  --rothko-font-size-h3: 2rem;
+  --rothko-font-size-h4: 1.75rem;
+  --rothko-font-size-h5: 1.5rem;
+  --rothko-font-size-h6: 1.25rem;
+  --rothko-font-size-body-small: 0.875rem;
+  --rothko-font-size-label: 0.75rem;
+  --rothko-font-size-caption: 0.75rem;
+  --rothko-font-size-code: 1rem;
+  --rothko-line-height-body: 1.5rem;
+  --rothko-line-height-h1: 3.25rem;
+  --rothko-line-height-h2: 2.75rem;
+  --rothko-line-height-h3: 2.5rem;
+  --rothko-line-height-h4: 2.25rem;
+  --rothko-line-height-h5: 2rem;
+  --rothko-line-height-h6: 1.75rem;
+  --rothko-line-height-body-small: 1.25rem;
+  --rothko-line-height-label: 0.9375rem;
+  --rothko-line-height-caption: 0.9375rem;
+  --rothko-line-height-code: 1.5rem;
+  --rothko-radius-xs: 0.125rem;
+  --rothko-radius-s: 0.25rem;
+  --rothko-radius-m: 0.5rem;
+  --rothko-radius-l: 0.75rem;
+  --rothko-border-width-xs: 1px;
+  --rothko-border-width-s: 2px;
+  --rothko-border-width-m: 4px;
+  --rothko-border-width-l: 8px;
+  --rothko-hover-opacity: 0.8;
+}
+
+/**
+ * Do not edit directly
+ * Generated on Sat, 22 Feb 2025 20:45:30 GMT
+ */
+
+:root {
+  --rothko-autocomplete-dropdown-max-height: 13.5rem;
+  --rothko-button-border-radius: 0.125rem;
+  --rothko-input-border-radius: 0.125rem;
+}
+
+@layer utilities {
+  .rothko-font-regular {
+    font-family: var(--rothko-font-family-regular);
+  }
+  .rothko-font-bold {
+    font-family: var(--rothko-font-family-bold);
+    font-weight: bold;
+  }
+  .rothko-font-italic {
+    font-family: var(--rothko-font-family-italic);
+  }
+  .rothko-font-light {
+    font-family: var(--rothko-font-family-light);
+    font-weight: 200;
+  }
+  .rothko-font-heading {
+    font-family: var(--rothko-font-family-heading);
+    font-weight: 700;
+  }
+  .rothko-font-code {
+    font-family: var(--rothko-font-family-code);
+  }
+  .rothko-color-body {
+    color: var(--rothko-typography-body-color);
+  }
+  .rothko-color-heading {
+    color: var(--rothko-typography-heading-color);
+  }
+  .rothko-color-code {
+    color: var(--rothko-typography-code-color);
+  }
+  /* XS */
+  .rothko-paragraph-size-xs {
+    font-size: var(--rothko-font-size-body-xsmall, 0.75rem);
+    line-height: var(--rothko-line-height-body-xsmall, 0.9375rem);
+  }
+  /* S */
+  .rothko-paragraph-size-s {
+    font-size: var(--rothko-font-size-body-small, 0.875rem);
+    line-height: var(--rothko-line-height-body-small, 1.25rem);
+  }
+  /* M */
+  .rothko-paragraph-size-m,
+  .rothko-paragraph-size-default {
+    font-size: var(--rothko-font-size-body, 1rem);
+    line-height: var(--rothko-line-height-body, 1.5rem);
+  }
+  /* L */
+  .rothko-paragraph-size-l {
+    font-size: var(--rothko-font-size-body-large, 1.25rem);
+    line-height: var(--rothko-line-height-body-large, 1.75rem);
+  }
+  /* h1 */
+  .rothko-heading-size-h1 {
+    font-size: var(--rothko-font-size-h1, 2.5rem);
+    line-height: var(--rothko-line-height-h1, 3.25rem);
+  }
+  /* h2 */
+  .rothko-heading-size-h2 {
+    font-size: var(--rothko-font-size-h2, 2.25rem);
+    line-height: var(--rothko-line-height-h2, 2.75rem);
+  }
+  /* h3 */
+  .rothko-heading-size-h3 {
+    font-size: var(--rothko-font-size-h3, 2rem);
+    line-height: var(--rothko-line-height-h3, 2.5rem);
+  }
+  /* h4 */
+  .rothko-heading-size-h4 {
+    font-size: var(--rothko-font-size-h4, 1.75rem);
+    line-height: var(--rothko-line-height-h4, 2.25rem);
+  }
+  /* h5 */
+  .rothko-heading-size-h5 {
+    font-size: var(--rothko-font-size-h5, 1.5rem);
+    line-height: var(--rothko-line-height-h5, 2rem);
+  }
+  /* h6 */
+  .rothko-heading-size-h6 {
+    font-size: var(--rothko-font-size-h6, 1.25rem);
+    line-height: var(--rothko-line-height-h6, 1.75rem);
+  }
+  /* code */
+  .rothko-code-size {
+    font-size: var(--rothko-font-size-code, 1rem);
+    line-height: var(--rothko-line-height-code, 1.25rem);
+  }
+  .ios-tap-highlight-color-transparent {
+    -webkit-tap-highlight-color: transparent;
+  }
+  .slash-separated:not(:last-of-type)::after {
+    content: ' / ';
+  }
+  .font-smoothing-antialiased {
+    /* Use font smoothing to make text more readable + lighter */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  .hide-chrome-browser-outline {
+    outline: none;
+    :active,
+    :focus {
+      outline: none;
+    }
+  }
+  .webkit-overflow-scrolling-touch {
+    -webkit-overflow-scrolling: touch;
+  }
+}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@rothko-ui/tokens",
+  "version": "1.4.2",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/luxo-ai/rothko-ui.git",
+    "directory": "packages/tokens"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "private": false,
+  "license": "MIT",
+  "author": "Luis Serazo <luxo.ai@proton.me>",
+  "description": "Style tokens for Rothko UI",
+  "source": "./src/index.ts",
+  "styles": "./build/tokens.css",
+  "scripts": {
+    "prebuild": "yarn clean",
+    "build": "node ./src/build.js",
+    "clean": "rimraf build"
+  },
+  "devDependencies": {
+    "fs": "^0.0.1-security",
+    "lodash.compact": "^3.0.1",
+    "path": "^0.12.7",
+    "rimraf": "^3.0.2",
+    "style-dictionary": "^3.9.2"
+  },
+  "exports": {
+    "./style.css": "./build/tokens.css"
+  },
+  "files": [
+    "build/tokens.css",
+    "LICENSE",
+    "README"
+  ],
+  "gitHead": "fa0338bf50f574c0a42d143d3bd317a40a6e3fb9"
+}