From f82324d9a8c8b8bb030c1f2794342f1e5a2698e9 Mon Sep 17 00:00:00 2001 From: Benjamin Leonard Date: Mon, 18 Aug 2025 11:00:25 +0100 Subject: [PATCH 01/26] CI and commit Tailwind build CSS files --- .github/workflows/build-themes.yaml | 12 +- .github/workflows/create-figma-tokens.yaml | 15 - .gitignore | 3 +- styles/dist/blue.css | 180 ++++++ styles/dist/green.css | 180 ++++++ styles/dist/main.css | 659 +++++++++++++++++++++ styles/dist/purple.css | 180 ++++++ styles/dist/red.css | 180 ++++++ styles/dist/tailwind.css | 51 ++ styles/dist/yellow.css | 180 ++++++ 10 files changed, 1613 insertions(+), 27 deletions(-) delete mode 100644 .github/workflows/create-figma-tokens.yaml create mode 100644 styles/dist/blue.css create mode 100644 styles/dist/green.css create mode 100644 styles/dist/main.css create mode 100644 styles/dist/purple.css create mode 100644 styles/dist/red.css create mode 100644 styles/dist/tailwind.css create mode 100644 styles/dist/yellow.css diff --git a/.github/workflows/build-themes.yaml b/.github/workflows/build-themes.yaml index 2b63c93b..07053f77 100644 --- a/.github/workflows/build-themes.yaml +++ b/.github/workflows/build-themes.yaml @@ -3,10 +3,10 @@ name: Build Themes on: workflow_dispatch: push: - branches: - - 'figma-tokens' paths: - 'styles/src/tokens.json' + - 'styles/src/**' + - 'scripts/build_themes.sh' jobs: build-themes: @@ -36,11 +36,3 @@ jobs: add: ./styles/dist message: 'Update themes from token file' default_author: github_actions - - - name: Create PR if it doesn't exist - env: - GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} - run: | - if [[ $(gh pr list --json "url" -q ".[].url" --head figma-tokens | wc -c) -eq 0 ]]; then - gh pr create --base master --head figma-tokens --title "Autogenerate themes from new tokens" --body "This PR is generated by 'build-themes.yaml' when new changes are made to tokens.json" - fi diff --git a/.github/workflows/create-figma-tokens.yaml b/.github/workflows/create-figma-tokens.yaml deleted file mode 100644 index 4bbdb8de..00000000 --- a/.github/workflows/create-figma-tokens.yaml +++ /dev/null @@ -1,15 +0,0 @@ -name: Recreate figma-tokens branch - -on: - delete: - branch: figma-tokens - -jobs: - recreate-figma-tokens: - runs-on: ubuntu-latest - steps: - - uses: peterjgrainger/action-create-branch@v2.0.1 - env: - GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} - with: - branch: 'figma-tokens' diff --git a/.gitignore b/.gitignore index bf7e4a95..ae783a8c 100644 --- a/.gitignore +++ b/.gitignore @@ -35,6 +35,5 @@ Thumbs.db # Ignore temporary script files scripts/*.md.mjs -styles/dist components/dist -dist/ +/dist/ diff --git a/styles/dist/blue.css b/styles/dist/blue.css new file mode 100644 index 00000000..daa51df5 --- /dev/null +++ b/styles/dist/blue.css @@ -0,0 +1,180 @@ +.blue-theme { + --surface-default: var(--color-neutral-0); + --surface-hover: var(--color-neutral-200); + --surface-raise: var(--color-neutral-50); + --surface-secondary: var(--color-neutral-100); + --surface-tertiary: var(--color-neutral-200); + --surface-disabled: var(--color-neutral-100); + --surface-scrim: color( + display-p3 0.036760063071504825 0.05804576716456642 0.06562718269807541 / 0.4 + ); /* #080f1166 with alpha 0.4 */ + --surface-accent: var(--theme-accent-800); + --surface-accent-hover: var(--theme-accent-700); + --surface-accent-secondary: var(--theme-accent-200); + --surface-accent-secondary-hover: var(--theme-accent-300); + --surface-destructive: var(--theme-destructive-800); + --surface-destructive-hover: var(--theme-destructive-700); + --surface-destructive-secondary: var(--theme-destructive-200); + --surface-destructive-secondary-hover: var(--theme-destructive-300); + --surface-notice: var(--theme-notice-800); + --surface-notice-hover: var(--theme-notice-700); + --surface-notice-secondary: var(--theme-notice-200); + --surface-notice-secondary-hover: var(--theme-notice-300); + --surface-success: var(--theme-success-800); + --surface-success-secondary: var(--theme-success-200); + --surface-error: var(--theme-error-800); + --surface-error-secondary: var(--theme-error-200); + --surface-inverse-raise: var(--content-raise); + --surface-inverse-primary: var(--content-default); + --surface-inverse-secondary: var(--content-secondary); + --surface-info: var(--theme-info-800); + --surface-info-hover: var(--theme-info-700); + --surface-info-secondary: var(--theme-info-200); + --surface-info-secondary-hover: var(--theme-info-300); + --content-raise: var(--color-neutral-900); + --content-default: var(--color-neutral-800); + --content-secondary: var(--color-neutral-700); + --content-tertiary: var(--color-neutral-600); + --content-quaternary: var(--color-neutral-500); + --content-disabled: var(--color-neutral-500); + --content-accent: var(--theme-accent-800); + --content-accent-secondary: var(--theme-accent-700); + --content-accent-tertiary: var(--theme-accent-600); + --content-accent-disabled: var(--theme-accent-500); + --content-destructive: var(--theme-destructive-800); + --content-destructive-secondary: var(--theme-destructive-700); + --content-destructive-tertiary: var(--theme-destructive-600); + --content-destructive-disabled: var(--theme-destructive-500); + --content-success: var(--theme-success-800); + --content-success-secondary: var(--theme-success-700); + --content-success-tertiary: var(--theme-success-600); + --content-success-disabled: var(--theme-success-500); + --content-error: var(--theme-error-800); + --content-error-secondary: var(--theme-error-700); + --content-error-tertiary: var(--theme-error-600); + --content-error-disabled: var(--theme-error-500); + --content-notice: var(--theme-notice-800); + --content-notice-secondary: var(--theme-notice-700); + --content-notice-tertiary: var(--theme-notice-600); + --content-notice-disabled: var(--theme-notice-500); + --content-inverse: var(--surface-default); + --content-inverse-raise: var(--surface-raise); + --content-inverse-secondary: var(--surface-secondary); + --content-info: var(--theme-info-800); + --content-info-secondary: var(--theme-info-700); + --content-info-tertiary: var(--theme-info-600); + --content-info-disabled: var(--theme-info-500); + --stroke-default: var(--color-neutral-300); + --stroke-hover: var(--color-neutral-400); + --stroke-secondary: var(--color-neutral-200); + --stroke-tertiary: var(--color-neutral-100); + --stroke-raise: var(--color-neutral-500); + --stroke-surface: var(--surface-default); + --stroke-accent: var(--theme-accent-800); + --stroke-accent-secondary: var(--theme-accent-600); + --stroke-accent-tertiary: var(--theme-accent-400); + --stroke-accent-quaternary: var(--theme-accent-300); + --stroke-destructive: var(--theme-destructive-800); + --stroke-destructive-secondary: var(--theme-destructive-600); + --stroke-destructive-tertiary: var(--theme-destructive-400); + --stroke-destructive-quaternary: var(--theme-destructive-300); + --stroke-success: var(--theme-success-800); + --stroke-success-secondary: var(--theme-success-600); + --stroke-success-tertiary: var(--theme-success-400); + --stroke-success-quaternary: var(--theme-success-300); + --stroke-error: var(--theme-error-800); + --stroke-error-secondary: var(--theme-error-600); + --stroke-error-tertiary: var(--theme-error-400); + --stroke-error-quaternary: var(--theme-error-300); + --stroke-notice: var(--theme-notice-800); + --stroke-notice-secondary: var(--theme-notice-600); + --stroke-notice-tertiary: var(--theme-notice-400); + --stroke-notice-quaternary: var(--theme-notice-300); + --stroke-info: var(--theme-info-800); + --stroke-info-secondary: var(--theme-info-600); + --stroke-info-tertiary: var(--theme-info-400); + --stroke-info-quaternary: var(--theme-info-300); + --chart-fill-area-primary: color( + display-p3 0.4840760759909391 0.5390189657729598 0.8433696459850775 / 0.7 + ); /* #788addb3 with alpha 0.7 */ + --chart-fill-area-secondary: color( + display-p3 0.4151256342009877 0.46094099659707627 0.713805186697585 / 0.7 + ); /* #6776bbb3 with alpha 0.7 */ + --chart-fill-area-tertiary: color( + display-p3 0.32502672686325673 0.35564413273764867 0.5459647947277517 / 0.7 + ); /* #515b8fb3 with alpha 0.7 */ + --chart-fill-area-quaternary: color( + display-p3 0.24043055576084826 0.2618867246658045 0.3897751920628703 / 0.2 + ); /* #3c436633 with alpha 0.2 */ + --chart-fill-item-primary: var(--theme-accent-700); + --chart-fill-item-secondary: var(--theme-accent-600); + --chart-fill-item-tertiary: var(--theme-accent-500); + --chart-fill-item-quaternary: var(--theme-accent-400); + --chart-fill-error-primary: var(--theme-destructive-700); + --chart-fill-error-secondary: var(--theme-destructive-600); + --chart-fill-error-tertiary: var(--theme-destructive-500); + --chart-fill-error-quaternary: var(--theme-destructive-400); + --chart-fill-inactive: var(--color-neutral-50); + --chart-stroke-line: var(--theme-accent-700); + --chart-stroke-line-secondary: var(--color-yellow-600); + --chart-stroke-line-tertiary: var(--color-red-600); + --chart-stroke-line-quaternary: var(--color-blue-600); + --chart-stroke-y-axis: color( + display-p3 0.18088995487994503 0.1992673051921286 0.20679231365610162 / 0.4 + ); /* #2d333566 with alpha 0.4 */ + --chart-stroke-item: color( + display-p3 0.4840760759909391 0.5390189657729598 0.8433696459850775 / 0.4 + ); /* #788add66 with alpha 0.4 */ + --chart-stroke-item-inactive: var(--color-neutral-200); + --chart-stroke-error: color( + display-p3 0.7964645558620367 0.40841569441043135 0.47149465440441213 / 0.4 + ); /* #da617766 with alpha 0.4 */ + --theme-accent-100: var(--color-blue-100); + --theme-accent-200: var(--color-blue-200); + --theme-accent-300: var(--color-blue-300); + --theme-accent-400: var(--color-blue-400); + --theme-accent-500: var(--color-blue-500); + --theme-accent-600: var(--color-blue-600); + --theme-accent-700: var(--color-blue-700); + --theme-accent-800: var(--color-blue-800); + --theme-destructive-100: var(--color-red-100); + --theme-destructive-200: var(--color-red-200); + --theme-destructive-300: var(--color-red-300); + --theme-destructive-400: var(--color-red-400); + --theme-destructive-500: var(--color-red-500); + --theme-destructive-600: var(--color-red-600); + --theme-destructive-700: var(--color-red-700); + --theme-destructive-800: var(--color-red-800); + --theme-success-100: var(--color-green-100); + --theme-success-200: var(--color-green-200); + --theme-success-300: var(--color-green-300); + --theme-success-400: var(--color-green-400); + --theme-success-500: var(--color-green-500); + --theme-success-600: var(--color-green-600); + --theme-success-700: var(--color-green-700); + --theme-success-800: var(--color-green-800); + --theme-error-100: var(--color-red-100); + --theme-error-200: var(--color-red-200); + --theme-error-300: var(--color-red-300); + --theme-error-400: var(--color-red-400); + --theme-error-500: var(--color-red-500); + --theme-error-600: var(--color-red-600); + --theme-error-700: var(--color-red-700); + --theme-error-800: var(--color-red-800); + --theme-notice-100: var(--color-yellow-100); + --theme-notice-200: var(--color-yellow-200); + --theme-notice-300: var(--color-yellow-300); + --theme-notice-400: var(--color-yellow-400); + --theme-notice-500: var(--color-yellow-500); + --theme-notice-600: var(--color-yellow-600); + --theme-notice-700: var(--color-yellow-700); + --theme-notice-800: var(--color-yellow-800); + --theme-info-100: var(--color-blue-100); + --theme-info-200: var(--color-blue-200); + --theme-info-300: var(--color-blue-300); + --theme-info-400: var(--color-blue-400); + --theme-info-500: var(--color-blue-500); + --theme-info-600: var(--color-blue-600); + --theme-info-700: var(--color-blue-700); + --theme-info-800: var(--color-blue-800); +} diff --git a/styles/dist/green.css b/styles/dist/green.css new file mode 100644 index 00000000..56d343e2 --- /dev/null +++ b/styles/dist/green.css @@ -0,0 +1,180 @@ +.green-theme { + --surface-default: var(--color-neutral-0); + --surface-hover: var(--color-neutral-200); + --surface-raise: var(--color-neutral-50); + --surface-secondary: var(--color-neutral-100); + --surface-tertiary: var(--color-neutral-200); + --surface-disabled: var(--color-neutral-100); + --surface-scrim: color( + display-p3 0.036760063071504825 0.05804576716456642 0.06562718269807541 / 0.4 + ); /* #080f1166 with alpha 0.4 */ + --surface-accent: var(--theme-accent-800); + --surface-accent-hover: var(--theme-accent-700); + --surface-accent-secondary: var(--theme-accent-200); + --surface-accent-secondary-hover: var(--theme-accent-300); + --surface-destructive: var(--theme-destructive-800); + --surface-destructive-hover: var(--theme-destructive-700); + --surface-destructive-secondary: var(--theme-destructive-200); + --surface-destructive-secondary-hover: var(--theme-destructive-300); + --surface-notice: var(--theme-notice-800); + --surface-notice-hover: var(--theme-notice-700); + --surface-notice-secondary: var(--theme-notice-200); + --surface-notice-secondary-hover: var(--theme-notice-300); + --surface-success: var(--theme-success-800); + --surface-success-secondary: var(--theme-success-200); + --surface-error: var(--theme-error-800); + --surface-error-secondary: var(--theme-error-200); + --surface-inverse-raise: var(--content-raise); + --surface-inverse-primary: var(--content-default); + --surface-inverse-secondary: var(--content-secondary); + --surface-info: var(--theme-info-800); + --surface-info-hover: var(--theme-info-700); + --surface-info-secondary: var(--theme-info-200); + --surface-info-secondary-hover: var(--theme-info-300); + --content-raise: var(--color-neutral-900); + --content-default: var(--color-neutral-800); + --content-secondary: var(--color-neutral-700); + --content-tertiary: var(--color-neutral-600); + --content-quaternary: var(--color-neutral-500); + --content-disabled: var(--color-neutral-500); + --content-accent: var(--theme-accent-800); + --content-accent-secondary: var(--theme-accent-700); + --content-accent-tertiary: var(--theme-accent-600); + --content-accent-disabled: var(--theme-accent-500); + --content-destructive: var(--theme-destructive-800); + --content-destructive-secondary: var(--theme-destructive-700); + --content-destructive-tertiary: var(--theme-destructive-600); + --content-destructive-disabled: var(--theme-destructive-500); + --content-success: var(--theme-success-800); + --content-success-secondary: var(--theme-success-700); + --content-success-tertiary: var(--theme-success-600); + --content-success-disabled: var(--theme-success-500); + --content-error: var(--theme-error-800); + --content-error-secondary: var(--theme-error-700); + --content-error-tertiary: var(--theme-error-600); + --content-error-disabled: var(--theme-error-500); + --content-notice: var(--theme-notice-800); + --content-notice-secondary: var(--theme-notice-700); + --content-notice-tertiary: var(--theme-notice-600); + --content-notice-disabled: var(--theme-notice-500); + --content-inverse: var(--surface-default); + --content-inverse-raise: var(--surface-raise); + --content-inverse-secondary: var(--surface-secondary); + --content-info: var(--theme-info-800); + --content-info-secondary: var(--theme-info-700); + --content-info-tertiary: var(--theme-info-600); + --content-info-disabled: var(--theme-info-500); + --stroke-default: var(--color-neutral-300); + --stroke-hover: var(--color-neutral-400); + --stroke-secondary: var(--color-neutral-200); + --stroke-tertiary: var(--color-neutral-100); + --stroke-raise: var(--color-neutral-500); + --stroke-surface: var(--surface-default); + --stroke-accent: var(--theme-accent-800); + --stroke-accent-secondary: var(--theme-accent-600); + --stroke-accent-tertiary: var(--theme-accent-400); + --stroke-accent-quaternary: var(--theme-accent-300); + --stroke-destructive: var(--theme-destructive-800); + --stroke-destructive-secondary: var(--theme-destructive-600); + --stroke-destructive-tertiary: var(--theme-destructive-400); + --stroke-destructive-quaternary: var(--theme-destructive-300); + --stroke-success: var(--theme-success-800); + --stroke-success-secondary: var(--theme-success-600); + --stroke-success-tertiary: var(--theme-success-400); + --stroke-success-quaternary: var(--theme-success-300); + --stroke-error: var(--theme-error-800); + --stroke-error-secondary: var(--theme-error-600); + --stroke-error-tertiary: var(--theme-error-400); + --stroke-error-quaternary: var(--theme-error-300); + --stroke-notice: var(--theme-notice-800); + --stroke-notice-secondary: var(--theme-notice-600); + --stroke-notice-tertiary: var(--theme-notice-400); + --stroke-notice-quaternary: var(--theme-notice-300); + --stroke-info: var(--theme-info-800); + --stroke-info-secondary: var(--theme-info-600); + --stroke-info-tertiary: var(--theme-info-400); + --stroke-info-quaternary: var(--theme-info-300); + --chart-fill-area-primary: color( + display-p3 0.30729539326874494 0.6299054596145268 0.440831736604609 / 0.7 + ); /* #20a36cb3 with alpha 0.7 */ + --chart-fill-area-secondary: color( + display-p3 0.2692940449440336 0.5334053150097006 0.38200477116356163 / 0.7 + ); /* #238a5eb3 with alpha 0.7 */ + --chart-fill-area-tertiary: color( + display-p3 0.21921823824294856 0.40988544994958725 0.3065549544047547 / 0.7 + ); /* #236a4cb3 with alpha 0.7 */ + --chart-fill-area-quaternary: color( + display-p3 0.17205281115427723 0.2979531244804644 0.23597564991643089 / 0.2 + ); /* #204d3b33 with alpha 0.2 */ + --chart-fill-item-primary: var(--theme-accent-700); + --chart-fill-item-secondary: var(--theme-accent-600); + --chart-fill-item-tertiary: var(--theme-accent-500); + --chart-fill-item-quaternary: var(--theme-accent-400); + --chart-fill-error-primary: var(--theme-destructive-700); + --chart-fill-error-secondary: var(--theme-destructive-600); + --chart-fill-error-tertiary: var(--theme-destructive-500); + --chart-fill-error-quaternary: var(--theme-destructive-400); + --chart-fill-inactive: var(--color-neutral-50); + --chart-stroke-line: var(--theme-accent-700); + --chart-stroke-line-secondary: var(--color-yellow-600); + --chart-stroke-line-tertiary: var(--color-red-600); + --chart-stroke-line-quaternary: var(--color-blue-600); + --chart-stroke-y-axis: color( + display-p3 0.18088995487994503 0.1992673051921286 0.20679231365610162 / 0.4 + ); /* #2d333566 with alpha 0.4 */ + --chart-stroke-item: color( + display-p3 0.30729539326874494 0.6299054596145268 0.440831736604609 / 0.4 + ); /* #20a36c66 with alpha 0.4 */ + --chart-stroke-item-inactive: var(--color-neutral-200); + --chart-stroke-error: color( + display-p3 0.7964645558620367 0.40841569441043135 0.47149465440441213 / 0.4 + ); /* #da617766 with alpha 0.4 */ + --theme-accent-100: var(--color-green-100); + --theme-accent-200: var(--color-green-200); + --theme-accent-300: var(--color-green-300); + --theme-accent-400: var(--color-green-400); + --theme-accent-500: var(--color-green-500); + --theme-accent-600: var(--color-green-600); + --theme-accent-700: var(--color-green-700); + --theme-accent-800: var(--color-green-800); + --theme-destructive-100: var(--color-red-100); + --theme-destructive-200: var(--color-red-200); + --theme-destructive-300: var(--color-red-300); + --theme-destructive-400: var(--color-red-400); + --theme-destructive-500: var(--color-red-500); + --theme-destructive-600: var(--color-red-600); + --theme-destructive-700: var(--color-red-700); + --theme-destructive-800: var(--color-red-800); + --theme-success-100: var(--color-green-100); + --theme-success-200: var(--color-green-200); + --theme-success-300: var(--color-green-300); + --theme-success-400: var(--color-green-400); + --theme-success-500: var(--color-green-500); + --theme-success-600: var(--color-green-600); + --theme-success-700: var(--color-green-700); + --theme-success-800: var(--color-green-800); + --theme-error-100: var(--color-red-100); + --theme-error-200: var(--color-red-200); + --theme-error-300: var(--color-red-300); + --theme-error-400: var(--color-red-400); + --theme-error-500: var(--color-red-500); + --theme-error-600: var(--color-red-600); + --theme-error-700: var(--color-red-700); + --theme-error-800: var(--color-red-800); + --theme-notice-100: var(--color-yellow-100); + --theme-notice-200: var(--color-yellow-200); + --theme-notice-300: var(--color-yellow-300); + --theme-notice-400: var(--color-yellow-400); + --theme-notice-500: var(--color-yellow-500); + --theme-notice-600: var(--color-yellow-600); + --theme-notice-700: var(--color-yellow-700); + --theme-notice-800: var(--color-yellow-800); + --theme-info-100: var(--color-blue-100); + --theme-info-200: var(--color-blue-200); + --theme-info-300: var(--color-blue-300); + --theme-info-400: var(--color-blue-400); + --theme-info-500: var(--color-blue-500); + --theme-info-600: var(--color-blue-600); + --theme-info-700: var(--color-blue-700); + --theme-info-800: var(--color-blue-800); +} diff --git a/styles/dist/main.css b/styles/dist/main.css new file mode 100644 index 00000000..cb9bace9 --- /dev/null +++ b/styles/dist/main.css @@ -0,0 +1,659 @@ +/* THIS FILE IS AUTOGENERATED, DO NOT EDIT */ +@import 'tailwindcss'; + +:root { + --color-neutral-1000: color( + display-p3 0.9967761539452785 0.9998701540262044 0.9999331805514878 + ); /* #FEFFFF */ + --color-neutral-900: color( + display-p3 0.8438352319511949 0.8469290330354962 0.8505640360063605 + ); /* #D7D8D9 */ + --color-neutral-800: color( + display-p3 0.7236755020156038 0.7329467520722801 0.7367074499372497 + ); /* #B8BBBC */ + --color-neutral-700: color( + display-p3 0.6334818103070252 0.6427511817107786 0.6465119387581825 + ); /* #A1A4A5 */ + --color-neutral-600: color( + display-p3 0.4976701084474386 0.5130897614687101 0.5205515394637789 + ); /* #7e8385 */ + --color-neutral-500: color( + display-p3 0.3597085003581039 0.3720412109254131 0.3794431797850346 + ); /* #5B5F61 */ + --color-neutral-400: color( + display-p3 0.2553413105536939 0.27376625441340496 0.27770648130844244 + ); /* #404647 */ + --color-neutral-300: color( + display-p3 0.18088995487994503 0.1992673051921286 0.20679231365610162 + ); /* #2D3335 */ + --color-neutral-200: color( + display-p3 0.11431963155657676 0.13261753531957074 0.143744402534617 + ); /* #1C2225 */ + --color-neutral-100: color( + display-p3 0.08386952946123807 0.10507459422019316 0.1126540913483059 + ); /* #141B1D */ + --color-neutral-50: color( + display-p3 0.06739284393097031 0.08558006444336808 0.0931064989053643 + ); /* #101618 */ + --color-neutral-0: color( + display-p3 0.036760063071504825 0.05804576716456642 0.06562718269807541 + ); /* #080F11 */ + --color-blue-800: color( + display-p3 0.5616641479260542 0.6287493953124766 0.9734821327451663 + ); /* #8BA1FF */ + --color-blue-700: color( + display-p3 0.4840760759909391 0.5390189657729598 0.8433696459850775 + ); /* #788ADD */ + --color-blue-600: color( + display-p3 0.4151256342009877 0.46094099659707627 0.713805186697585 + ); /* #6776BB */ + --color-blue-500: color( + display-p3 0.32502672686325673 0.35564413273764867 0.5459647947277517 + ); /* #515B8F */ + --color-blue-400: color( + display-p3 0.24043055576084826 0.2618867246658045 0.3897751920628703 + ); /* #3C4366 */ + --color-blue-300: color( + display-p3 0.1786200923014884 0.1878574995226226 0.2752857688446367 + ); /* #2D3048 */ + --color-blue-200: color( + display-p3 0.11907577529357963 0.12523747486865994 0.17245027907531774 + ); /* #1E202D */ + --color-blue-100: color( + display-p3 0.09090310464814949 0.09398978491029422 0.12658653445006884 + ); /* #171821 */ + --color-purple-800: color( + display-p3 0.7199041089606463 0.5905777966739129 0.8997851881994727 + ); /* #BE95EB */ + --color-purple-700: color( + display-p3 0.6176620043485992 0.5072919661927223 0.7770451092818965 + ); /* #A380CB */ + --color-purple-600: color( + display-p3 0.5266029147263402 0.43201348221720354 0.658472257647523 + ); /* #8B6DAC */ + --color-purple-500: color( + display-p3 0.40927836765624315 0.3368069077031495 0.5055688506059814 + ); /* #6C5584 */ + --color-purple-400: color( + display-p3 0.2925207541619176 0.24535487188954597 0.3602153988663625 + ); /* #4D3E5E */ + --color-purple-300: color( + display-p3 0.21265042602455625 0.17808591248874042 0.25689800139783175 + ); /* #382D43 */ + --color-purple-200: color( + display-p3 0.14120618453185496 0.1224209120935679 0.165300467987632 + ); /* #251F2B */ + --color-purple-100: color( + display-p3 0.11380102321850455 0.0949832101380699 0.13061626398927353 + ); /* #1E1822 */ + --color-red-800: color( + display-p3 0.9168165401949406 0.46465535927403595 0.5390081507653561 + ); /* #FB6E88 */ + --color-red-700: color( + display-p3 0.7964645558620367 0.40841569441043135 0.47149465440441213 + ); /* #DA6177 */ + --color-red-600: color( + display-p3 0.7123368412346623 0.3659764657543945 0.42018168321468297 + ); /* #C3576A */ + --color-red-500: color( + display-p3 0.54467993913213 0.2881585750532095 0.32859275026896756 + ); /* #954553 */ + --color-red-400: color( + display-p3 0.3880353956012564 0.21503505622273383 0.2377024955644162 + ); /* #6A343C */ + --color-red-300: color( + display-p3 0.17652197603839365 0.10959767370210685 0.11485879231717566 + ); /* #301B1D */ + --color-red-200: color( + display-p3 0.129140055434958 0.08468327014966448 0.09064241222767869 + ); /* #231517 */ + --color-red-100: color( + display-p3 0.1111091592090036 0.07627289273638779 0.07896469636558265 + ); /* #1E1314 */ + --color-yellow-800: color( + display-p3 0.9246726761147905 0.7349322400144668 0.35478568923303233 + ); /* #F5B944 */ + --color-yellow-700: color( + display-p3 0.7625685956908921 0.60767449881825 0.2994621129781391 + ); /* #CA993B */ + --color-yellow-600: color( + display-p3 0.577577081670476 0.46066704465450065 0.23478898502532436 + ); /* #997430 */ + --color-yellow-500: color( + display-p3 0.4456676007915647 0.3572643913038676 0.1862111103866858 + ); /* #765A27 */ + --color-yellow-400: color( + display-p3 0.32158715205107063 0.26170195700266397 0.14269771287346764 + ); /* #55421F */ + --color-yellow-300: color( + display-p3 0.231079570994478 0.1901717568816926 0.11084081717589886 + ); /* #3D3019 */ + --color-yellow-200: color( + display-p3 0.1551157651257713 0.12681932912773047 0.08123881916988879 + ); /* #292013 */ + --color-yellow-100: color( + display-p3 0.12104842543229768 0.09906271231243746 0.063859934590173 + ); /* #20190F */ + --color-green-800: color( + display-p3 0.4509664622561616 0.8240810849465557 0.6105978837942857 + ); /* #48d597 */ + --color-green-700: color( + display-p3 0.30729539326874494 0.6299054596145268 0.440831736604609 + ); /* #20A36C */ + --color-green-600: color( + display-p3 0.2692940449440336 0.5334053150097006 0.38200477116356163 + ); /* #238A5E */ + --color-green-500: color( + display-p3 0.21921823824294856 0.40988544994958725 0.3065549544047547 + ); /* #236A4C */ + --color-green-400: color( + display-p3 0.17205281115427723 0.2979531244804644 0.23597564991643089 + ); /* #204D3B */ + --color-green-300: color( + display-p3 0.13497680842452758 0.21306259957523738 0.18224720796629387 + ); /* #1C372E */ + --color-green-200: color( + display-p3 0.09712693532459268 0.13585807676438863 0.13295269910261515 + ); /* #162322 */ + --color-green-100: color( + display-p3 0.07996460795736646 0.10115556161740791 0.10873484064468295 + ); /* #131A1C */ + --surface-default: var(--color-neutral-0); + --surface-hover: var(--color-neutral-200); + --surface-raise: var(--color-neutral-50); + --surface-secondary: var(--color-neutral-100); + --surface-tertiary: var(--color-neutral-200); + --surface-disabled: var(--color-neutral-100); + --surface-scrim: color( + display-p3 0.036760063071504825 0.05804576716456642 0.06562718269807541 / 0.4 + ); /* #080f1166 with alpha 0.4 */ + --surface-accent: var(--theme-accent-800); + --surface-accent-hover: var(--theme-accent-700); + --surface-accent-secondary: var(--theme-accent-200); + --surface-accent-secondary-hover: var(--theme-accent-300); + --surface-destructive: var(--theme-destructive-800); + --surface-destructive-hover: var(--theme-destructive-700); + --surface-destructive-secondary: var(--theme-destructive-200); + --surface-destructive-secondary-hover: var(--theme-destructive-300); + --surface-notice: var(--theme-notice-800); + --surface-notice-hover: var(--theme-notice-700); + --surface-notice-secondary: var(--theme-notice-200); + --surface-notice-secondary-hover: var(--theme-notice-300); + --surface-success: var(--theme-success-800); + --surface-success-secondary: var(--theme-success-200); + --surface-error: var(--theme-error-800); + --surface-error-secondary: var(--theme-error-200); + --surface-inverse-raise: var(--content-raise); + --surface-inverse-primary: var(--content-default); + --surface-inverse-secondary: var(--content-secondary); + --surface-info: var(--theme-info-800); + --surface-info-hover: var(--theme-info-700); + --surface-info-secondary: var(--theme-info-200); + --surface-info-secondary-hover: var(--theme-info-300); + --content-raise: var(--color-neutral-900); + --content-default: var(--color-neutral-800); + --content-secondary: var(--color-neutral-700); + --content-tertiary: var(--color-neutral-600); + --content-quaternary: var(--color-neutral-500); + --content-disabled: var(--color-neutral-500); + --content-accent: var(--theme-accent-800); + --content-accent-secondary: var(--theme-accent-700); + --content-accent-tertiary: var(--theme-accent-600); + --content-accent-disabled: var(--theme-accent-500); + --content-destructive: var(--theme-destructive-800); + --content-destructive-secondary: var(--theme-destructive-700); + --content-destructive-tertiary: var(--theme-destructive-600); + --content-destructive-disabled: var(--theme-destructive-500); + --content-success: var(--theme-success-800); + --content-success-secondary: var(--theme-success-700); + --content-success-tertiary: var(--theme-success-600); + --content-success-disabled: var(--theme-success-500); + --content-error: var(--theme-error-800); + --content-error-secondary: var(--theme-error-700); + --content-error-tertiary: var(--theme-error-600); + --content-error-disabled: var(--theme-error-500); + --content-notice: var(--theme-notice-800); + --content-notice-secondary: var(--theme-notice-700); + --content-notice-tertiary: var(--theme-notice-600); + --content-notice-disabled: var(--theme-notice-500); + --content-inverse: var(--surface-default); + --content-inverse-raise: var(--surface-raise); + --content-inverse-secondary: var(--surface-secondary); + --content-info: var(--theme-info-800); + --content-info-secondary: var(--theme-info-700); + --content-info-tertiary: var(--theme-info-600); + --content-info-disabled: var(--theme-info-500); + --stroke-default: var(--color-neutral-300); + --stroke-hover: var(--color-neutral-400); + --stroke-secondary: var(--color-neutral-200); + --stroke-tertiary: var(--color-neutral-100); + --stroke-raise: var(--color-neutral-500); + --stroke-surface: var(--surface-default); + --stroke-accent: var(--theme-accent-800); + --stroke-accent-secondary: var(--theme-accent-600); + --stroke-accent-tertiary: var(--theme-accent-400); + --stroke-accent-quaternary: var(--theme-accent-300); + --stroke-destructive: var(--theme-destructive-800); + --stroke-destructive-secondary: var(--theme-destructive-600); + --stroke-destructive-tertiary: var(--theme-destructive-400); + --stroke-destructive-quaternary: var(--theme-destructive-300); + --stroke-success: var(--theme-success-800); + --stroke-success-secondary: var(--theme-success-600); + --stroke-success-tertiary: var(--theme-success-400); + --stroke-success-quaternary: var(--theme-success-300); + --stroke-error: var(--theme-error-800); + --stroke-error-secondary: var(--theme-error-600); + --stroke-error-tertiary: var(--theme-error-400); + --stroke-error-quaternary: var(--theme-error-300); + --stroke-notice: var(--theme-notice-800); + --stroke-notice-secondary: var(--theme-notice-600); + --stroke-notice-tertiary: var(--theme-notice-400); + --stroke-notice-quaternary: var(--theme-notice-300); + --stroke-info: var(--theme-info-800); + --stroke-info-secondary: var(--theme-info-600); + --stroke-info-tertiary: var(--theme-info-400); + --stroke-info-quaternary: var(--theme-info-300); + --chart-fill-area-primary: color( + display-p3 0.30729539326874494 0.6299054596145268 0.440831736604609 / 0.7 + ); /* #20a36cb3 with alpha 0.7 */ + --chart-fill-area-secondary: color( + display-p3 0.2692940449440336 0.5334053150097006 0.38200477116356163 / 0.7 + ); /* #238a5eb3 with alpha 0.7 */ + --chart-fill-area-tertiary: color( + display-p3 0.21921823824294856 0.40988544994958725 0.3065549544047547 / 0.7 + ); /* #236a4cb3 with alpha 0.7 */ + --chart-fill-area-quaternary: color( + display-p3 0.17205281115427723 0.2979531244804644 0.23597564991643089 / 0.2 + ); /* #204d3b33 with alpha 0.2 */ + --chart-fill-item-primary: var(--theme-accent-700); + --chart-fill-item-secondary: var(--theme-accent-600); + --chart-fill-item-tertiary: var(--theme-accent-500); + --chart-fill-item-quaternary: var(--theme-accent-400); + --chart-fill-error-primary: var(--theme-destructive-700); + --chart-fill-error-secondary: var(--theme-destructive-600); + --chart-fill-error-tertiary: var(--theme-destructive-500); + --chart-fill-error-quaternary: var(--theme-destructive-400); + --chart-fill-inactive: var(--color-neutral-50); + --chart-stroke-line: var(--theme-accent-700); + --chart-stroke-line-secondary: var(--color-yellow-600); + --chart-stroke-line-tertiary: var(--color-red-600); + --chart-stroke-line-quaternary: var(--color-blue-600); + --chart-stroke-y-axis: color( + display-p3 0.18088995487994503 0.1992673051921286 0.20679231365610162 / 0.4 + ); /* #2d333566 with alpha 0.4 */ + --chart-stroke-item: color( + display-p3 0.30729539326874494 0.6299054596145268 0.440831736604609 / 0.4 + ); /* #20a36c66 with alpha 0.4 */ + --chart-stroke-item-inactive: var(--color-neutral-200); + --chart-stroke-error: color( + display-p3 0.7964645558620367 0.40841569441043135 0.47149465440441213 / 0.4 + ); /* #da617766 with alpha 0.4 */ + --theme-accent-100: var(--color-green-100); + --theme-accent-200: var(--color-green-200); + --theme-accent-300: var(--color-green-300); + --theme-accent-400: var(--color-green-400); + --theme-accent-500: var(--color-green-500); + --theme-accent-600: var(--color-green-600); + --theme-accent-700: var(--color-green-700); + --theme-accent-800: var(--color-green-800); + --theme-destructive-100: var(--color-red-100); + --theme-destructive-200: var(--color-red-200); + --theme-destructive-300: var(--color-red-300); + --theme-destructive-400: var(--color-red-400); + --theme-destructive-500: var(--color-red-500); + --theme-destructive-600: var(--color-red-600); + --theme-destructive-700: var(--color-red-700); + --theme-destructive-800: var(--color-red-800); + --theme-success-100: var(--color-green-100); + --theme-success-200: var(--color-green-200); + --theme-success-300: var(--color-green-300); + --theme-success-400: var(--color-green-400); + --theme-success-500: var(--color-green-500); + --theme-success-600: var(--color-green-600); + --theme-success-700: var(--color-green-700); + --theme-success-800: var(--color-green-800); + --theme-error-100: var(--color-red-100); + --theme-error-200: var(--color-red-200); + --theme-error-300: var(--color-red-300); + --theme-error-400: var(--color-red-400); + --theme-error-500: var(--color-red-500); + --theme-error-600: var(--color-red-600); + --theme-error-700: var(--color-red-700); + --theme-error-800: var(--color-red-800); + --theme-notice-100: var(--color-yellow-100); + --theme-notice-200: var(--color-yellow-200); + --theme-notice-300: var(--color-yellow-300); + --theme-notice-400: var(--color-yellow-400); + --theme-notice-500: var(--color-yellow-500); + --theme-notice-600: var(--color-yellow-600); + --theme-notice-700: var(--color-yellow-700); + --theme-notice-800: var(--color-yellow-800); + --theme-info-100: var(--color-blue-100); + --theme-info-200: var(--color-blue-200); + --theme-info-300: var(--color-blue-300); + --theme-info-400: var(--color-blue-400); + --theme-info-500: var(--color-blue-500); + --theme-info-600: var(--color-blue-600); + --theme-info-700: var(--color-blue-700); + --theme-info-800: var(--color-blue-800); +} + +@theme inline { + --font-sans: SuisseIntl, -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif; + --font-mono: 'GT America Mono', monospace; + + --background-color-default: var(--surface-default); + --background-color-hover: var(--surface-hover); + --background-color-raise: var(--surface-raise); + --background-color-secondary: var(--surface-secondary); + --background-color-tertiary: var(--surface-tertiary); + --background-color-disabled: var(--surface-disabled); + --background-color-scrim: var(--surface-scrim); + --background-color-accent: var(--surface-accent); + --background-color-accent-hover: var(--surface-accent-hover); + --background-color-accent-secondary: var(--surface-accent-secondary); + --background-color-accent-secondary-hover: var(--surface-accent-secondary-hover); + --background-color-destructive: var(--surface-destructive); + --background-color-destructive-hover: var(--surface-destructive-hover); + --background-color-destructive-secondary: var(--surface-destructive-secondary); + --background-color-destructive-secondary-hover: var( + --surface-destructive-secondary-hover + ); + --background-color-notice: var(--surface-notice); + --background-color-notice-hover: var(--surface-notice-hover); + --background-color-notice-secondary: var(--surface-notice-secondary); + --background-color-notice-secondary-hover: var(--surface-notice-secondary-hover); + --background-color-success: var(--surface-success); + --background-color-success-secondary: var(--surface-success-secondary); + --background-color-error: var(--surface-error); + --background-color-error-secondary: var(--surface-error-secondary); + --background-color-inverse-raise: var(--surface-inverse-raise); + --background-color-inverse-primary: var(--surface-inverse-primary); + --background-color-inverse-secondary: var(--surface-inverse-secondary); + --background-color-info: var(--surface-info); + --background-color-info-hover: var(--surface-info-hover); + --background-color-info-secondary: var(--surface-info-secondary); + --background-color-info-secondary-hover: var(--surface-info-secondary-hover); + --text-color-raise: var(--content-raise); + --text-color-default: var(--content-default); + --text-color-secondary: var(--content-secondary); + --text-color-tertiary: var(--content-tertiary); + --text-color-quaternary: var(--content-quaternary); + --text-color-disabled: var(--content-disabled); + --text-color-accent: var(--content-accent); + --text-color-accent-secondary: var(--content-accent-secondary); + --text-color-accent-tertiary: var(--content-accent-tertiary); + --text-color-accent-disabled: var(--content-accent-disabled); + --text-color-destructive: var(--content-destructive); + --text-color-destructive-secondary: var(--content-destructive-secondary); + --text-color-destructive-tertiary: var(--content-destructive-tertiary); + --text-color-destructive-disabled: var(--content-destructive-disabled); + --text-color-success: var(--content-success); + --text-color-success-secondary: var(--content-success-secondary); + --text-color-success-tertiary: var(--content-success-tertiary); + --text-color-success-disabled: var(--content-success-disabled); + --text-color-error: var(--content-error); + --text-color-error-secondary: var(--content-error-secondary); + --text-color-error-tertiary: var(--content-error-tertiary); + --text-color-error-disabled: var(--content-error-disabled); + --text-color-notice: var(--content-notice); + --text-color-notice-secondary: var(--content-notice-secondary); + --text-color-notice-tertiary: var(--content-notice-tertiary); + --text-color-notice-disabled: var(--content-notice-disabled); + --text-color-inverse: var(--content-inverse); + --text-color-inverse-raise: var(--content-inverse-raise); + --text-color-inverse-secondary: var(--content-inverse-secondary); + --text-color-info: var(--content-info); + --text-color-info-secondary: var(--content-info-secondary); + --text-color-info-tertiary: var(--content-info-tertiary); + --text-color-info-disabled: var(--content-info-disabled); + --border-color-default: var(--stroke-default); + --ring-color-default: var(--stroke-default); + --outline-color-default: var(--stroke-default); + --border-color-hover: var(--stroke-hover); + --ring-color-hover: var(--stroke-hover); + --outline-color-hover: var(--stroke-hover); + --border-color-secondary: var(--stroke-secondary); + --ring-color-secondary: var(--stroke-secondary); + --outline-color-secondary: var(--stroke-secondary); + --border-color-tertiary: var(--stroke-tertiary); + --ring-color-tertiary: var(--stroke-tertiary); + --outline-color-tertiary: var(--stroke-tertiary); + --border-color-raise: var(--stroke-raise); + --ring-color-raise: var(--stroke-raise); + --outline-color-raise: var(--stroke-raise); + --border-color-surface: var(--stroke-surface); + --ring-color-surface: var(--stroke-surface); + --outline-color-surface: var(--stroke-surface); + --border-color-accent: var(--stroke-accent); + --ring-color-accent: var(--stroke-accent); + --outline-color-accent: var(--stroke-accent); + --border-color-accent-secondary: var(--stroke-accent-secondary); + --ring-color-accent-secondary: var(--stroke-accent-secondary); + --outline-color-accent-secondary: var(--stroke-accent-secondary); + --border-color-accent-tertiary: var(--stroke-accent-tertiary); + --ring-color-accent-tertiary: var(--stroke-accent-tertiary); + --outline-color-accent-tertiary: var(--stroke-accent-tertiary); + --border-color-accent-quaternary: var(--stroke-accent-quaternary); + --ring-color-accent-quaternary: var(--stroke-accent-quaternary); + --outline-color-accent-quaternary: var(--stroke-accent-quaternary); + --border-color-destructive: var(--stroke-destructive); + --ring-color-destructive: var(--stroke-destructive); + --outline-color-destructive: var(--stroke-destructive); + --border-color-destructive-secondary: var(--stroke-destructive-secondary); + --ring-color-destructive-secondary: var(--stroke-destructive-secondary); + --outline-color-destructive-secondary: var(--stroke-destructive-secondary); + --border-color-destructive-tertiary: var(--stroke-destructive-tertiary); + --ring-color-destructive-tertiary: var(--stroke-destructive-tertiary); + --outline-color-destructive-tertiary: var(--stroke-destructive-tertiary); + --border-color-destructive-quaternary: var(--stroke-destructive-quaternary); + --ring-color-destructive-quaternary: var(--stroke-destructive-quaternary); + --outline-color-destructive-quaternary: var(--stroke-destructive-quaternary); + --border-color-success: var(--stroke-success); + --ring-color-success: var(--stroke-success); + --outline-color-success: var(--stroke-success); + --border-color-success-secondary: var(--stroke-success-secondary); + --ring-color-success-secondary: var(--stroke-success-secondary); + --outline-color-success-secondary: var(--stroke-success-secondary); + --border-color-success-tertiary: var(--stroke-success-tertiary); + --ring-color-success-tertiary: var(--stroke-success-tertiary); + --outline-color-success-tertiary: var(--stroke-success-tertiary); + --border-color-success-quaternary: var(--stroke-success-quaternary); + --ring-color-success-quaternary: var(--stroke-success-quaternary); + --outline-color-success-quaternary: var(--stroke-success-quaternary); + --border-color-error: var(--stroke-error); + --ring-color-error: var(--stroke-error); + --outline-color-error: var(--stroke-error); + --border-color-error-secondary: var(--stroke-error-secondary); + --ring-color-error-secondary: var(--stroke-error-secondary); + --outline-color-error-secondary: var(--stroke-error-secondary); + --border-color-error-tertiary: var(--stroke-error-tertiary); + --ring-color-error-tertiary: var(--stroke-error-tertiary); + --outline-color-error-tertiary: var(--stroke-error-tertiary); + --border-color-error-quaternary: var(--stroke-error-quaternary); + --ring-color-error-quaternary: var(--stroke-error-quaternary); + --outline-color-error-quaternary: var(--stroke-error-quaternary); + --border-color-notice: var(--stroke-notice); + --ring-color-notice: var(--stroke-notice); + --outline-color-notice: var(--stroke-notice); + --border-color-notice-secondary: var(--stroke-notice-secondary); + --ring-color-notice-secondary: var(--stroke-notice-secondary); + --outline-color-notice-secondary: var(--stroke-notice-secondary); + --border-color-notice-tertiary: var(--stroke-notice-tertiary); + --ring-color-notice-tertiary: var(--stroke-notice-tertiary); + --outline-color-notice-tertiary: var(--stroke-notice-tertiary); + --border-color-notice-quaternary: var(--stroke-notice-quaternary); + --ring-color-notice-quaternary: var(--stroke-notice-quaternary); + --outline-color-notice-quaternary: var(--stroke-notice-quaternary); + --border-color-info: var(--stroke-info); + --ring-color-info: var(--stroke-info); + --outline-color-info: var(--stroke-info); + --border-color-info-secondary: var(--stroke-info-secondary); + --ring-color-info-secondary: var(--stroke-info-secondary); + --outline-color-info-secondary: var(--stroke-info-secondary); + --border-color-info-tertiary: var(--stroke-info-tertiary); + --ring-color-info-tertiary: var(--stroke-info-tertiary); + --outline-color-info-tertiary: var(--stroke-info-tertiary); + --border-color-info-quaternary: var(--stroke-info-quaternary); + --ring-color-info-quaternary: var(--stroke-info-quaternary); + --outline-color-info-quaternary: var(--stroke-info-quaternary); + --fill-color-area-primary: var(--chart-fill-area-primary); + --fill-color-area-secondary: var(--chart-fill-area-secondary); + --fill-color-area-tertiary: var(--chart-fill-area-tertiary); + --fill-color-area-quaternary: var(--chart-fill-area-quaternary); + --fill-color-item-primary: var(--chart-fill-item-primary); + --fill-color-item-secondary: var(--chart-fill-item-secondary); + --fill-color-item-tertiary: var(--chart-fill-item-tertiary); + --fill-color-item-quaternary: var(--chart-fill-item-quaternary); + --fill-color-error-primary: var(--chart-fill-error-primary); + --fill-color-error-secondary: var(--chart-fill-error-secondary); + --fill-color-error-tertiary: var(--chart-fill-error-tertiary); + --fill-color-error-quaternary: var(--chart-fill-error-quaternary); + --fill-color-inactive: var(--chart-fill-inactive); + --stroke-color-line: var(--chart-stroke-line); + --stroke-color-line-secondary: var(--chart-stroke-line-secondary); + --stroke-color-line-tertiary: var(--chart-stroke-line-tertiary); + --stroke-color-line-quaternary: var(--chart-stroke-line-quaternary); + --stroke-color-y-axis: var(--chart-stroke-y-axis); + --stroke-color-item: var(--chart-stroke-item); + --stroke-color-item-inactive: var(--chart-stroke-item-inactive); + --stroke-color-error: var(--chart-stroke-error); + + --radius-sm: 0.125rem; + --radius: 0.1875rem; + --radius-lg: 0.375rem; + --radius-xl: 0.75rem; + --radius-full: 624.9375rem; +} + +@utility elevation-0 { + box-shadow: none; +} +@utility elevation-1 { + box-shadow: 0px 1px 2px #00000099; +} +@utility elevation-2 { + box-shadow: 0px 2.188px 4.625px #00000021, 0px 10px 13px #00000033, + 0px 25.313px 34.875px #00000045, 0px 50px 80px #00000066; +} +@utility elevation-3 { + box-shadow: 0px 4.375px 4.625px #00000021, 0px 20px 13px #00000033, + 0px 50.625px 34.875px #00000045, 0px 100px 80px #00000066; +} + +@utility text-mono-xs { + font-family: var(--font-mono); + font-weight: 400; + line-height: 1rem; + font-size: 0.6875rem; + letter-spacing: 0.04rem; + text-transform: uppercase; + font-feature-settings: 'ss02' on, 'ss03' on, 'ss09' on, 'ss06' on, 'ss07' on, 'ss08' on, + 'calt' off; +} +@utility text-mono-sm { + font-family: var(--font-mono); + font-weight: 400; + line-height: 1rem; + font-size: 0.75rem; + letter-spacing: 0.04rem; + text-transform: uppercase; + font-feature-settings: 'ss02' on, 'ss03' on, 'ss09' on, 'ss06' on, 'ss07' on, 'ss08' on, + 'calt' off; +} +@utility text-mono-code { + font-family: var(--font-mono); + font-weight: 400; + line-height: 1rem; + font-size: 0.75rem; + letter-spacing: 0rem; + font-feature-settings: 'ss02' on, 'ss03' on, 'ss09' on, 'ss06' on, 'ss07' on, 'ss08' on, + 'calt' off; +} +@utility text-mono-md { + font-family: var(--font-mono); + font-weight: 400; + line-height: 1.25rem; + font-size: 0.875rem; + letter-spacing: 0.04rem; + text-transform: uppercase; + font-feature-settings: 'ss02' on, 'ss03' on, 'ss09' on, 'ss06' on, 'ss07' on, 'ss08' on, + 'calt' off; +} +@utility text-sans-sm { + font-family: var(--font-sans); + font-weight: 400; + line-height: 1rem; + font-size: 0.75rem; + letter-spacing: 0.04rem; +} +@utility text-sans-md { + font-family: var(--font-sans); + font-weight: 400; + line-height: 1.125rem; + font-size: 0.875rem; + letter-spacing: 0.04rem; +} +@utility text-sans-lg { + font-family: var(--font-sans); + font-weight: 400; + line-height: 1.5rem; + font-size: 1rem; + letter-spacing: 0.03rem; +} +@utility text-sans-xl { + font-family: var(--font-sans); + font-weight: 400; + line-height: 1.625rem; + font-size: 1.125rem; + letter-spacing: 0.02rem; +} +@utility text-sans-2xl { + font-family: var(--font-sans); + font-weight: 400; + line-height: 2rem; + font-size: 1.5625rem; + letter-spacing: 0.015rem; +} +@utility text-sans-3xl { + font-family: var(--font-sans); + font-weight: 400; + line-height: 2.625rem; + font-size: 2.25rem; + letter-spacing: 0.005rem; +} +@utility text-sans-4xl { + font-family: var(--font-sans); + font-weight: 400; + line-height: 3.625rem; + font-size: 3.25rem; + letter-spacing: -0.01rem; +} +@utility text-sans-semi-sm { + font-family: var(--font-sans); + font-weight: 500; + line-height: 1rem; + font-size: 0.75rem; + letter-spacing: 0.04rem; +} +@utility text-sans-semi-md { + font-family: var(--font-sans); + font-weight: 500; + line-height: 1.125rem; + font-size: 0.875rem; + letter-spacing: 0.04rem; +} +@utility text-sans-semi-lg { + font-family: var(--font-sans); + font-weight: 500; + line-height: 1.5rem; + font-size: 1rem; + letter-spacing: 0.03rem; +} +@utility text-sans-semi-xl { + font-family: var(--font-sans); + font-weight: 500; + line-height: 1.625rem; + font-size: 1.125rem; + letter-spacing: 0.02rem; +} diff --git a/styles/dist/purple.css b/styles/dist/purple.css new file mode 100644 index 00000000..e3ed6769 --- /dev/null +++ b/styles/dist/purple.css @@ -0,0 +1,180 @@ +.purple-theme { + --surface-default: var(--color-neutral-0); + --surface-hover: var(--color-neutral-200); + --surface-raise: var(--color-neutral-50); + --surface-secondary: var(--color-neutral-100); + --surface-tertiary: var(--color-neutral-200); + --surface-disabled: var(--color-neutral-100); + --surface-scrim: color( + display-p3 0.036760063071504825 0.05804576716456642 0.06562718269807541 / 0.4 + ); /* #080f1166 with alpha 0.4 */ + --surface-accent: var(--theme-accent-800); + --surface-accent-hover: var(--theme-accent-700); + --surface-accent-secondary: var(--theme-accent-200); + --surface-accent-secondary-hover: var(--theme-accent-300); + --surface-destructive: var(--theme-destructive-800); + --surface-destructive-hover: var(--theme-destructive-700); + --surface-destructive-secondary: var(--theme-destructive-200); + --surface-destructive-secondary-hover: var(--theme-destructive-300); + --surface-notice: var(--theme-notice-800); + --surface-notice-hover: var(--theme-notice-700); + --surface-notice-secondary: var(--theme-notice-200); + --surface-notice-secondary-hover: var(--theme-notice-300); + --surface-success: var(--theme-success-800); + --surface-success-secondary: var(--theme-success-200); + --surface-error: var(--theme-error-800); + --surface-error-secondary: var(--theme-error-200); + --surface-inverse-raise: var(--content-raise); + --surface-inverse-primary: var(--content-default); + --surface-inverse-secondary: var(--content-secondary); + --surface-info: var(--theme-info-800); + --surface-info-hover: var(--theme-info-700); + --surface-info-secondary: var(--theme-info-200); + --surface-info-secondary-hover: var(--theme-info-300); + --content-raise: var(--color-neutral-900); + --content-default: var(--color-neutral-800); + --content-secondary: var(--color-neutral-700); + --content-tertiary: var(--color-neutral-600); + --content-quaternary: var(--color-neutral-500); + --content-disabled: var(--color-neutral-500); + --content-accent: var(--theme-accent-800); + --content-accent-secondary: var(--theme-accent-700); + --content-accent-tertiary: var(--theme-accent-600); + --content-accent-disabled: var(--theme-accent-500); + --content-destructive: var(--theme-destructive-800); + --content-destructive-secondary: var(--theme-destructive-700); + --content-destructive-tertiary: var(--theme-destructive-600); + --content-destructive-disabled: var(--theme-destructive-500); + --content-success: var(--theme-success-800); + --content-success-secondary: var(--theme-success-700); + --content-success-tertiary: var(--theme-success-600); + --content-success-disabled: var(--theme-success-500); + --content-error: var(--theme-error-800); + --content-error-secondary: var(--theme-error-700); + --content-error-tertiary: var(--theme-error-600); + --content-error-disabled: var(--theme-error-500); + --content-notice: var(--theme-notice-800); + --content-notice-secondary: var(--theme-notice-700); + --content-notice-tertiary: var(--theme-notice-600); + --content-notice-disabled: var(--theme-notice-500); + --content-inverse: var(--surface-default); + --content-inverse-raise: var(--surface-raise); + --content-inverse-secondary: var(--surface-secondary); + --content-info: var(--theme-info-800); + --content-info-secondary: var(--theme-info-700); + --content-info-tertiary: var(--theme-info-600); + --content-info-disabled: var(--theme-info-500); + --stroke-default: var(--color-neutral-300); + --stroke-hover: var(--color-neutral-400); + --stroke-secondary: var(--color-neutral-200); + --stroke-tertiary: var(--color-neutral-100); + --stroke-raise: var(--color-neutral-500); + --stroke-surface: var(--surface-default); + --stroke-accent: var(--theme-accent-800); + --stroke-accent-secondary: var(--theme-accent-600); + --stroke-accent-tertiary: var(--theme-accent-400); + --stroke-accent-quaternary: var(--theme-accent-300); + --stroke-destructive: var(--theme-destructive-800); + --stroke-destructive-secondary: var(--theme-destructive-600); + --stroke-destructive-tertiary: var(--theme-destructive-400); + --stroke-destructive-quaternary: var(--theme-destructive-300); + --stroke-success: var(--theme-success-800); + --stroke-success-secondary: var(--theme-success-600); + --stroke-success-tertiary: var(--theme-success-400); + --stroke-success-quaternary: var(--theme-success-300); + --stroke-error: var(--theme-error-800); + --stroke-error-secondary: var(--theme-error-600); + --stroke-error-tertiary: var(--theme-error-400); + --stroke-error-quaternary: var(--theme-error-300); + --stroke-notice: var(--theme-notice-800); + --stroke-notice-secondary: var(--theme-notice-600); + --stroke-notice-tertiary: var(--theme-notice-400); + --stroke-notice-quaternary: var(--theme-notice-300); + --stroke-info: var(--theme-info-800); + --stroke-info-secondary: var(--theme-info-600); + --stroke-info-tertiary: var(--theme-info-400); + --stroke-info-quaternary: var(--theme-info-300); + --chart-fill-area-primary: color( + display-p3 0.6176620043485992 0.5072919661927223 0.7770451092818965 / 0.7 + ); /* #a380cbb3 with alpha 0.7 */ + --chart-fill-area-secondary: color( + display-p3 0.5266029147263402 0.43201348221720354 0.658472257647523 / 0.7 + ); /* #8b6dacb3 with alpha 0.7 */ + --chart-fill-area-tertiary: color( + display-p3 0.40927836765624315 0.3368069077031495 0.5055688506059814 / 0.7 + ); /* #6c5584b3 with alpha 0.7 */ + --chart-fill-area-quaternary: color( + display-p3 0.2925207541619176 0.24535487188954597 0.3602153988663625 / 0.2 + ); /* #4d3e5e33 with alpha 0.2 */ + --chart-fill-item-primary: var(--theme-accent-700); + --chart-fill-item-secondary: var(--theme-accent-600); + --chart-fill-item-tertiary: var(--theme-accent-500); + --chart-fill-item-quaternary: var(--theme-accent-400); + --chart-fill-error-primary: var(--theme-destructive-700); + --chart-fill-error-secondary: var(--theme-destructive-600); + --chart-fill-error-tertiary: var(--theme-destructive-500); + --chart-fill-error-quaternary: var(--theme-destructive-400); + --chart-fill-inactive: var(--color-neutral-50); + --chart-stroke-line: var(--theme-accent-700); + --chart-stroke-line-secondary: var(--color-yellow-600); + --chart-stroke-line-tertiary: var(--color-red-600); + --chart-stroke-line-quaternary: var(--color-blue-600); + --chart-stroke-y-axis: color( + display-p3 0.18088995487994503 0.1992673051921286 0.20679231365610162 / 0.4 + ); /* #2d333566 with alpha 0.4 */ + --chart-stroke-item: color( + display-p3 0.6176620043485992 0.5072919661927223 0.7770451092818965 / 0.4 + ); /* #a380cb66 with alpha 0.4 */ + --chart-stroke-item-inactive: var(--color-neutral-200); + --chart-stroke-error: color( + display-p3 0.7964645558620367 0.40841569441043135 0.47149465440441213 / 0.4 + ); /* #da617766 with alpha 0.4 */ + --theme-accent-100: var(--color-purple-100); + --theme-accent-200: var(--color-purple-200); + --theme-accent-300: var(--color-purple-300); + --theme-accent-400: var(--color-purple-400); + --theme-accent-500: var(--color-purple-500); + --theme-accent-600: var(--color-purple-600); + --theme-accent-700: var(--color-purple-700); + --theme-accent-800: var(--color-purple-800); + --theme-destructive-100: var(--color-red-100); + --theme-destructive-200: var(--color-red-200); + --theme-destructive-300: var(--color-red-300); + --theme-destructive-400: var(--color-red-400); + --theme-destructive-500: var(--color-red-500); + --theme-destructive-600: var(--color-red-600); + --theme-destructive-700: var(--color-red-700); + --theme-destructive-800: var(--color-red-800); + --theme-success-100: var(--color-green-100); + --theme-success-200: var(--color-green-200); + --theme-success-300: var(--color-green-300); + --theme-success-400: var(--color-green-400); + --theme-success-500: var(--color-green-500); + --theme-success-600: var(--color-green-600); + --theme-success-700: var(--color-green-700); + --theme-success-800: var(--color-green-800); + --theme-error-100: var(--color-red-100); + --theme-error-200: var(--color-red-200); + --theme-error-300: var(--color-red-300); + --theme-error-400: var(--color-red-400); + --theme-error-500: var(--color-red-500); + --theme-error-600: var(--color-red-600); + --theme-error-700: var(--color-red-700); + --theme-error-800: var(--color-red-800); + --theme-notice-100: var(--color-yellow-100); + --theme-notice-200: var(--color-yellow-200); + --theme-notice-300: var(--color-yellow-300); + --theme-notice-400: var(--color-yellow-400); + --theme-notice-500: var(--color-yellow-500); + --theme-notice-600: var(--color-yellow-600); + --theme-notice-700: var(--color-yellow-700); + --theme-notice-800: var(--color-yellow-800); + --theme-info-100: var(--color-blue-100); + --theme-info-200: var(--color-blue-200); + --theme-info-300: var(--color-blue-300); + --theme-info-400: var(--color-blue-400); + --theme-info-500: var(--color-blue-500); + --theme-info-600: var(--color-blue-600); + --theme-info-700: var(--color-blue-700); + --theme-info-800: var(--color-blue-800); +} diff --git a/styles/dist/red.css b/styles/dist/red.css new file mode 100644 index 00000000..60142793 --- /dev/null +++ b/styles/dist/red.css @@ -0,0 +1,180 @@ +.red-theme { + --surface-default: var(--color-neutral-0); + --surface-hover: var(--color-neutral-200); + --surface-raise: var(--color-neutral-50); + --surface-secondary: var(--color-neutral-100); + --surface-tertiary: var(--color-neutral-200); + --surface-disabled: var(--color-neutral-100); + --surface-scrim: color( + display-p3 0.036760063071504825 0.05804576716456642 0.06562718269807541 / 0.4 + ); /* #080f1166 with alpha 0.4 */ + --surface-accent: var(--theme-accent-800); + --surface-accent-hover: var(--theme-accent-700); + --surface-accent-secondary: var(--theme-accent-200); + --surface-accent-secondary-hover: var(--theme-accent-300); + --surface-destructive: var(--theme-destructive-800); + --surface-destructive-hover: var(--theme-destructive-700); + --surface-destructive-secondary: var(--theme-destructive-200); + --surface-destructive-secondary-hover: var(--theme-destructive-300); + --surface-notice: var(--theme-notice-800); + --surface-notice-hover: var(--theme-notice-700); + --surface-notice-secondary: var(--theme-notice-200); + --surface-notice-secondary-hover: var(--theme-notice-300); + --surface-success: var(--theme-success-800); + --surface-success-secondary: var(--theme-success-200); + --surface-error: var(--theme-error-800); + --surface-error-secondary: var(--theme-error-200); + --surface-inverse-raise: var(--content-raise); + --surface-inverse-primary: var(--content-default); + --surface-inverse-secondary: var(--content-secondary); + --surface-info: var(--theme-info-800); + --surface-info-hover: var(--theme-info-700); + --surface-info-secondary: var(--theme-info-200); + --surface-info-secondary-hover: var(--theme-info-300); + --content-raise: var(--color-neutral-900); + --content-default: var(--color-neutral-800); + --content-secondary: var(--color-neutral-700); + --content-tertiary: var(--color-neutral-600); + --content-quaternary: var(--color-neutral-500); + --content-disabled: var(--color-neutral-500); + --content-accent: var(--theme-accent-800); + --content-accent-secondary: var(--theme-accent-700); + --content-accent-tertiary: var(--theme-accent-600); + --content-accent-disabled: var(--theme-accent-500); + --content-destructive: var(--theme-destructive-800); + --content-destructive-secondary: var(--theme-destructive-700); + --content-destructive-tertiary: var(--theme-destructive-600); + --content-destructive-disabled: var(--theme-destructive-500); + --content-success: var(--theme-success-800); + --content-success-secondary: var(--theme-success-700); + --content-success-tertiary: var(--theme-success-600); + --content-success-disabled: var(--theme-success-500); + --content-error: var(--theme-error-800); + --content-error-secondary: var(--theme-error-700); + --content-error-tertiary: var(--theme-error-600); + --content-error-disabled: var(--theme-error-500); + --content-notice: var(--theme-notice-800); + --content-notice-secondary: var(--theme-notice-700); + --content-notice-tertiary: var(--theme-notice-600); + --content-notice-disabled: var(--theme-notice-500); + --content-inverse: var(--surface-default); + --content-inverse-raise: var(--surface-raise); + --content-inverse-secondary: var(--surface-secondary); + --content-info: var(--theme-info-800); + --content-info-secondary: var(--theme-info-700); + --content-info-tertiary: var(--theme-info-600); + --content-info-disabled: var(--theme-info-500); + --stroke-default: var(--color-neutral-300); + --stroke-hover: var(--color-neutral-400); + --stroke-secondary: var(--color-neutral-200); + --stroke-tertiary: var(--color-neutral-100); + --stroke-raise: var(--color-neutral-500); + --stroke-surface: var(--surface-default); + --stroke-accent: var(--theme-accent-800); + --stroke-accent-secondary: var(--theme-accent-600); + --stroke-accent-tertiary: var(--theme-accent-400); + --stroke-accent-quaternary: var(--theme-accent-300); + --stroke-destructive: var(--theme-destructive-800); + --stroke-destructive-secondary: var(--theme-destructive-600); + --stroke-destructive-tertiary: var(--theme-destructive-400); + --stroke-destructive-quaternary: var(--theme-destructive-300); + --stroke-success: var(--theme-success-800); + --stroke-success-secondary: var(--theme-success-600); + --stroke-success-tertiary: var(--theme-success-400); + --stroke-success-quaternary: var(--theme-success-300); + --stroke-error: var(--theme-error-800); + --stroke-error-secondary: var(--theme-error-600); + --stroke-error-tertiary: var(--theme-error-400); + --stroke-error-quaternary: var(--theme-error-300); + --stroke-notice: var(--theme-notice-800); + --stroke-notice-secondary: var(--theme-notice-600); + --stroke-notice-tertiary: var(--theme-notice-400); + --stroke-notice-quaternary: var(--theme-notice-300); + --stroke-info: var(--theme-info-800); + --stroke-info-secondary: var(--theme-info-600); + --stroke-info-tertiary: var(--theme-info-400); + --stroke-info-quaternary: var(--theme-info-300); + --chart-fill-area-primary: color( + display-p3 0.7964645558620367 0.40841569441043135 0.47149465440441213 / 0.7 + ); /* #da6177b3 with alpha 0.7 */ + --chart-fill-area-secondary: color( + display-p3 0.7123368412346623 0.3659764657543945 0.42018168321468297 / 0.7 + ); /* #c3576ab3 with alpha 0.7 */ + --chart-fill-area-tertiary: color( + display-p3 0.54467993913213 0.2881585750532095 0.32859275026896756 / 0.7 + ); /* #954553b3 with alpha 0.7 */ + --chart-fill-area-quaternary: color( + display-p3 0.3880353956012564 0.21503505622273383 0.2377024955644162 / 0.2 + ); /* #6a343c33 with alpha 0.2 */ + --chart-fill-item-primary: var(--theme-accent-700); + --chart-fill-item-secondary: var(--theme-accent-600); + --chart-fill-item-tertiary: var(--theme-accent-500); + --chart-fill-item-quaternary: var(--theme-accent-400); + --chart-fill-error-primary: var(--theme-destructive-700); + --chart-fill-error-secondary: var(--theme-destructive-600); + --chart-fill-error-tertiary: var(--theme-destructive-500); + --chart-fill-error-quaternary: var(--theme-destructive-400); + --chart-fill-inactive: var(--color-neutral-50); + --chart-stroke-line: var(--theme-accent-700); + --chart-stroke-line-secondary: var(--color-yellow-600); + --chart-stroke-line-tertiary: var(--color-red-600); + --chart-stroke-line-quaternary: var(--color-blue-600); + --chart-stroke-y-axis: color( + display-p3 0.18088995487994503 0.1992673051921286 0.20679231365610162 / 0.4 + ); /* #2d333566 with alpha 0.4 */ + --chart-stroke-item: color( + display-p3 0.7964645558620367 0.40841569441043135 0.47149465440441213 / 0.4 + ); /* #da617766 with alpha 0.4 */ + --chart-stroke-item-inactive: var(--color-neutral-200); + --chart-stroke-error: color( + display-p3 0.7964645558620367 0.40841569441043135 0.47149465440441213 / 0.4 + ); /* #da617766 with alpha 0.4 */ + --theme-accent-100: var(--color-red-100); + --theme-accent-200: var(--color-red-200); + --theme-accent-300: var(--color-red-300); + --theme-accent-400: var(--color-red-400); + --theme-accent-500: var(--color-red-500); + --theme-accent-600: var(--color-red-600); + --theme-accent-700: var(--color-red-700); + --theme-accent-800: var(--color-red-800); + --theme-destructive-100: var(--color-red-100); + --theme-destructive-200: var(--color-red-200); + --theme-destructive-300: var(--color-red-300); + --theme-destructive-400: var(--color-red-400); + --theme-destructive-500: var(--color-red-500); + --theme-destructive-600: var(--color-red-600); + --theme-destructive-700: var(--color-red-700); + --theme-destructive-800: var(--color-red-800); + --theme-success-100: var(--color-green-100); + --theme-success-200: var(--color-green-200); + --theme-success-300: var(--color-green-300); + --theme-success-400: var(--color-green-400); + --theme-success-500: var(--color-green-500); + --theme-success-600: var(--color-green-600); + --theme-success-700: var(--color-green-700); + --theme-success-800: var(--color-green-800); + --theme-error-100: var(--color-red-100); + --theme-error-200: var(--color-red-200); + --theme-error-300: var(--color-red-300); + --theme-error-400: var(--color-red-400); + --theme-error-500: var(--color-red-500); + --theme-error-600: var(--color-red-600); + --theme-error-700: var(--color-red-700); + --theme-error-800: var(--color-red-800); + --theme-notice-100: var(--color-yellow-100); + --theme-notice-200: var(--color-yellow-200); + --theme-notice-300: var(--color-yellow-300); + --theme-notice-400: var(--color-yellow-400); + --theme-notice-500: var(--color-yellow-500); + --theme-notice-600: var(--color-yellow-600); + --theme-notice-700: var(--color-yellow-700); + --theme-notice-800: var(--color-yellow-800); + --theme-info-100: var(--color-blue-100); + --theme-info-200: var(--color-blue-200); + --theme-info-300: var(--color-blue-300); + --theme-info-400: var(--color-blue-400); + --theme-info-500: var(--color-blue-500); + --theme-info-600: var(--color-blue-600); + --theme-info-700: var(--color-blue-700); + --theme-info-800: var(--color-blue-800); +} diff --git a/styles/dist/tailwind.css b/styles/dist/tailwind.css new file mode 100644 index 00000000..f95bd76d --- /dev/null +++ b/styles/dist/tailwind.css @@ -0,0 +1,51 @@ +/* + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, you can obtain one at https://mozilla.org/MPL/2.0/. + * + * Copyright Oxide Computer Company + */ + +/* +Set the default cursor for buttons. +*/ + +button, +[role='button'] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ +:disabled { + cursor: default; +} + +@theme { + --color-*: initial; /* disable default colors */ + + --breakpoint-300: 300px; + --breakpoint-400: 400px; + --breakpoint-500: 500px; + --breakpoint-600: 600px; + --breakpoint-700: 700px; + --breakpoint-800: 800px; + --breakpoint-900: 900px; + --breakpoint-1000: 1000px; + --breakpoint-1200: 1200px; + --breakpoint-1400: 1400px; + --breakpoint-1600: 1600px; + + --container-300: 300px; + --container-400: 400px; + --container-500: 500px; + --container-600: 600px; + --container-700: 700px; + --container-800: 800px; + --container-900: 900px; + --container-1000: 1000px; + --container-1200: 1200px; + --container-1400: 1400px; + --container-1600: 1600px; +} diff --git a/styles/dist/yellow.css b/styles/dist/yellow.css new file mode 100644 index 00000000..4033d764 --- /dev/null +++ b/styles/dist/yellow.css @@ -0,0 +1,180 @@ +.yellow-theme { + --surface-default: var(--color-neutral-0); + --surface-hover: var(--color-neutral-200); + --surface-raise: var(--color-neutral-50); + --surface-secondary: var(--color-neutral-100); + --surface-tertiary: var(--color-neutral-200); + --surface-disabled: var(--color-neutral-100); + --surface-scrim: color( + display-p3 0.036760063071504825 0.05804576716456642 0.06562718269807541 / 0.4 + ); /* #080f1166 with alpha 0.4 */ + --surface-accent: var(--theme-accent-800); + --surface-accent-hover: var(--theme-accent-700); + --surface-accent-secondary: var(--theme-accent-200); + --surface-accent-secondary-hover: var(--theme-accent-300); + --surface-destructive: var(--theme-destructive-800); + --surface-destructive-hover: var(--theme-destructive-700); + --surface-destructive-secondary: var(--theme-destructive-200); + --surface-destructive-secondary-hover: var(--theme-destructive-300); + --surface-notice: var(--theme-notice-800); + --surface-notice-hover: var(--theme-notice-700); + --surface-notice-secondary: var(--theme-notice-200); + --surface-notice-secondary-hover: var(--theme-notice-300); + --surface-success: var(--theme-success-800); + --surface-success-secondary: var(--theme-success-200); + --surface-error: var(--theme-error-800); + --surface-error-secondary: var(--theme-error-200); + --surface-inverse-raise: var(--content-raise); + --surface-inverse-primary: var(--content-default); + --surface-inverse-secondary: var(--content-secondary); + --surface-info: var(--theme-info-800); + --surface-info-hover: var(--theme-info-700); + --surface-info-secondary: var(--theme-info-200); + --surface-info-secondary-hover: var(--theme-info-300); + --content-raise: var(--color-neutral-900); + --content-default: var(--color-neutral-800); + --content-secondary: var(--color-neutral-700); + --content-tertiary: var(--color-neutral-600); + --content-quaternary: var(--color-neutral-500); + --content-disabled: var(--color-neutral-500); + --content-accent: var(--theme-accent-800); + --content-accent-secondary: var(--theme-accent-700); + --content-accent-tertiary: var(--theme-accent-600); + --content-accent-disabled: var(--theme-accent-500); + --content-destructive: var(--theme-destructive-800); + --content-destructive-secondary: var(--theme-destructive-700); + --content-destructive-tertiary: var(--theme-destructive-600); + --content-destructive-disabled: var(--theme-destructive-500); + --content-success: var(--theme-success-800); + --content-success-secondary: var(--theme-success-700); + --content-success-tertiary: var(--theme-success-600); + --content-success-disabled: var(--theme-success-500); + --content-error: var(--theme-error-800); + --content-error-secondary: var(--theme-error-700); + --content-error-tertiary: var(--theme-error-600); + --content-error-disabled: var(--theme-error-500); + --content-notice: var(--theme-notice-800); + --content-notice-secondary: var(--theme-notice-700); + --content-notice-tertiary: var(--theme-notice-600); + --content-notice-disabled: var(--theme-notice-500); + --content-inverse: var(--surface-default); + --content-inverse-raise: var(--surface-raise); + --content-inverse-secondary: var(--surface-secondary); + --content-info: var(--theme-info-800); + --content-info-secondary: var(--theme-info-700); + --content-info-tertiary: var(--theme-info-600); + --content-info-disabled: var(--theme-info-500); + --stroke-default: var(--color-neutral-300); + --stroke-hover: var(--color-neutral-400); + --stroke-secondary: var(--color-neutral-200); + --stroke-tertiary: var(--color-neutral-100); + --stroke-raise: var(--color-neutral-500); + --stroke-surface: var(--surface-default); + --stroke-accent: var(--theme-accent-800); + --stroke-accent-secondary: var(--theme-accent-600); + --stroke-accent-tertiary: var(--theme-accent-400); + --stroke-accent-quaternary: var(--theme-accent-300); + --stroke-destructive: var(--theme-destructive-800); + --stroke-destructive-secondary: var(--theme-destructive-600); + --stroke-destructive-tertiary: var(--theme-destructive-400); + --stroke-destructive-quaternary: var(--theme-destructive-300); + --stroke-success: var(--theme-success-800); + --stroke-success-secondary: var(--theme-success-600); + --stroke-success-tertiary: var(--theme-success-400); + --stroke-success-quaternary: var(--theme-success-300); + --stroke-error: var(--theme-error-800); + --stroke-error-secondary: var(--theme-error-600); + --stroke-error-tertiary: var(--theme-error-400); + --stroke-error-quaternary: var(--theme-error-300); + --stroke-notice: var(--theme-notice-800); + --stroke-notice-secondary: var(--theme-notice-600); + --stroke-notice-tertiary: var(--theme-notice-400); + --stroke-notice-quaternary: var(--theme-notice-300); + --stroke-info: var(--theme-info-800); + --stroke-info-secondary: var(--theme-info-600); + --stroke-info-tertiary: var(--theme-info-400); + --stroke-info-quaternary: var(--theme-info-300); + --chart-fill-area-primary: color( + display-p3 0.7625685956908921 0.60767449881825 0.2994621129781391 / 0.7 + ); /* #ca993bb3 with alpha 0.7 */ + --chart-fill-area-secondary: color( + display-p3 0.577577081670476 0.46066704465450065 0.23478898502532436 / 0.7 + ); /* #997430b3 with alpha 0.7 */ + --chart-fill-area-tertiary: color( + display-p3 0.4456676007915647 0.3572643913038676 0.1862111103866858 / 0.7 + ); /* #765a27b3 with alpha 0.7 */ + --chart-fill-area-quaternary: color( + display-p3 0.32158715205107063 0.26170195700266397 0.14269771287346764 / 0.2 + ); /* #55421f33 with alpha 0.2 */ + --chart-fill-item-primary: var(--theme-accent-700); + --chart-fill-item-secondary: var(--theme-accent-600); + --chart-fill-item-tertiary: var(--theme-accent-500); + --chart-fill-item-quaternary: var(--theme-accent-400); + --chart-fill-error-primary: var(--theme-destructive-700); + --chart-fill-error-secondary: var(--theme-destructive-600); + --chart-fill-error-tertiary: var(--theme-destructive-500); + --chart-fill-error-quaternary: var(--theme-destructive-400); + --chart-fill-inactive: var(--color-neutral-50); + --chart-stroke-line: var(--theme-accent-700); + --chart-stroke-line-secondary: var(--color-yellow-600); + --chart-stroke-line-tertiary: var(--color-red-600); + --chart-stroke-line-quaternary: var(--color-blue-600); + --chart-stroke-y-axis: color( + display-p3 0.18088995487994503 0.1992673051921286 0.20679231365610162 / 0.4 + ); /* #2d333566 with alpha 0.4 */ + --chart-stroke-item: color( + display-p3 0.7625685956908921 0.60767449881825 0.2994621129781391 / 0.4 + ); /* #ca993b66 with alpha 0.4 */ + --chart-stroke-item-inactive: var(--color-neutral-200); + --chart-stroke-error: color( + display-p3 0.7964645558620367 0.40841569441043135 0.47149465440441213 / 0.4 + ); /* #da617766 with alpha 0.4 */ + --theme-accent-100: var(--color-yellow-100); + --theme-accent-200: var(--color-yellow-200); + --theme-accent-300: var(--color-yellow-300); + --theme-accent-400: var(--color-yellow-400); + --theme-accent-500: var(--color-yellow-500); + --theme-accent-600: var(--color-yellow-600); + --theme-accent-700: var(--color-yellow-700); + --theme-accent-800: var(--color-yellow-800); + --theme-destructive-100: var(--color-red-100); + --theme-destructive-200: var(--color-red-200); + --theme-destructive-300: var(--color-red-300); + --theme-destructive-400: var(--color-red-400); + --theme-destructive-500: var(--color-red-500); + --theme-destructive-600: var(--color-red-600); + --theme-destructive-700: var(--color-red-700); + --theme-destructive-800: var(--color-red-800); + --theme-success-100: var(--color-green-100); + --theme-success-200: var(--color-green-200); + --theme-success-300: var(--color-green-300); + --theme-success-400: var(--color-green-400); + --theme-success-500: var(--color-green-500); + --theme-success-600: var(--color-green-600); + --theme-success-700: var(--color-green-700); + --theme-success-800: var(--color-green-800); + --theme-error-100: var(--color-red-100); + --theme-error-200: var(--color-red-200); + --theme-error-300: var(--color-red-300); + --theme-error-400: var(--color-red-400); + --theme-error-500: var(--color-red-500); + --theme-error-600: var(--color-red-600); + --theme-error-700: var(--color-red-700); + --theme-error-800: var(--color-red-800); + --theme-notice-100: var(--color-yellow-100); + --theme-notice-200: var(--color-yellow-200); + --theme-notice-300: var(--color-yellow-300); + --theme-notice-400: var(--color-yellow-400); + --theme-notice-500: var(--color-yellow-500); + --theme-notice-600: var(--color-yellow-600); + --theme-notice-700: var(--color-yellow-700); + --theme-notice-800: var(--color-yellow-800); + --theme-info-100: var(--color-blue-100); + --theme-info-200: var(--color-blue-200); + --theme-info-300: var(--color-blue-300); + --theme-info-400: var(--color-blue-400); + --theme-info-500: var(--color-blue-500); + --theme-info-600: var(--color-blue-600); + --theme-info-700: var(--color-blue-700); + --theme-info-800: var(--color-blue-800); +} From 99435bf9fe38708c7eac188ec6d58b89b75a3c66 Mon Sep 17 00:00:00 2001 From: Benjamin Leonard Date: Mon, 18 Aug 2025 11:07:38 +0100 Subject: [PATCH 02/26] Build themes on workflow update --- .github/workflows/build-themes.yaml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/workflows/build-themes.yaml b/.github/workflows/build-themes.yaml index 07053f77..24cbc99c 100644 --- a/.github/workflows/build-themes.yaml +++ b/.github/workflows/build-themes.yaml @@ -7,6 +7,7 @@ on: - 'styles/src/tokens.json' - 'styles/src/**' - 'scripts/build_themes.sh' + - '.github/workflows/build-themes.yaml' jobs: build-themes: From 9cc8f4466d43778ce7804293b1dedae3cc78badd Mon Sep 17 00:00:00 2001 From: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Date: Mon, 18 Aug 2025 10:08:12 +0000 Subject: [PATCH 03/26] Update themes from token file --- styles/dist/blue.css | 2 +- styles/dist/main.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/styles/dist/blue.css b/styles/dist/blue.css index daa51df5..ff283c30 100644 --- a/styles/dist/blue.css +++ b/styles/dist/blue.css @@ -101,7 +101,7 @@ display-p3 0.4151256342009877 0.46094099659707627 0.713805186697585 / 0.7 ); /* #6776bbb3 with alpha 0.7 */ --chart-fill-area-tertiary: color( - display-p3 0.32502672686325673 0.35564413273764867 0.5459647947277517 / 0.7 + display-p3 0.32502672686325673 0.3556441327376487 0.5459647947277517 / 0.7 ); /* #515b8fb3 with alpha 0.7 */ --chart-fill-area-quaternary: color( display-p3 0.24043055576084826 0.2618867246658045 0.3897751920628703 / 0.2 diff --git a/styles/dist/main.css b/styles/dist/main.css index cb9bace9..5d4ebb70 100644 --- a/styles/dist/main.css +++ b/styles/dist/main.css @@ -48,7 +48,7 @@ display-p3 0.4151256342009877 0.46094099659707627 0.713805186697585 ); /* #6776BB */ --color-blue-500: color( - display-p3 0.32502672686325673 0.35564413273764867 0.5459647947277517 + display-p3 0.32502672686325673 0.3556441327376487 0.5459647947277517 ); /* #515B8F */ --color-blue-400: color( display-p3 0.24043055576084826 0.2618867246658045 0.3897751920628703 From 1e5abac1ea9d7ba291cd48edc12faa3a4c6fbdc7 Mon Sep 17 00:00:00 2001 From: Benjamin Leonard Date: Mon, 18 Aug 2025 11:13:23 +0100 Subject: [PATCH 04/26] Don't verify on release --- .github/workflows/release.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 8097be5c..b22bea59 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -27,4 +27,4 @@ jobs: GH_TOKEN: ${{ secrets.GH_TOKEN }} NPM_TOKEN: ${{ secrets.NPM_TOKEN }} run: | - npm run build && npm run release + npm run build && npm run release -- --no-verify From 751820bcf61fe6c84b827eddcf4aec107b9887f2 Mon Sep 17 00:00:00 2001 From: Benjamin Leonard Date: Mon, 18 Aug 2025 11:13:39 +0100 Subject: [PATCH 05/26] Update tailwind.css --- styles/src/tailwind.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/styles/src/tailwind.css b/styles/src/tailwind.css index f95bd76d..fa04fecb 100644 --- a/styles/src/tailwind.css +++ b/styles/src/tailwind.css @@ -10,6 +10,8 @@ Set the default cursor for buttons. */ +/* bump */ + button, [role='button'] { cursor: pointer; From 9973ecfa903dd9faabd6dc4f04bca349d1d1e740 Mon Sep 17 00:00:00 2001 From: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Date: Mon, 18 Aug 2025 10:14:36 +0000 Subject: [PATCH 06/26] Update themes from token file --- styles/dist/tailwind.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/styles/dist/tailwind.css b/styles/dist/tailwind.css index f95bd76d..fa04fecb 100644 --- a/styles/dist/tailwind.css +++ b/styles/dist/tailwind.css @@ -10,6 +10,8 @@ Set the default cursor for buttons. */ +/* bump */ + button, [role='button'] { cursor: pointer; From 865c744e199b4ed2e39336092cc8ebdd36956594 Mon Sep 17 00:00:00 2001 From: Benjamin Leonard Date: Mon, 18 Aug 2025 11:23:02 +0100 Subject: [PATCH 07/26] Try waiting on build themes first --- .github/workflows/build-themes.yaml | 5 ----- .github/workflows/release.yml | 14 +++++++++++++- styles/src/tailwind.css | 2 -- 3 files changed, 13 insertions(+), 8 deletions(-) diff --git a/.github/workflows/build-themes.yaml b/.github/workflows/build-themes.yaml index 24cbc99c..38a218a6 100644 --- a/.github/workflows/build-themes.yaml +++ b/.github/workflows/build-themes.yaml @@ -3,11 +3,6 @@ name: Build Themes on: workflow_dispatch: push: - paths: - - 'styles/src/tokens.json' - - 'styles/src/**' - - 'scripts/build_themes.sh' - - '.github/workflows/build-themes.yaml' jobs: build-themes: diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index b22bea59..e8853b01 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -22,9 +22,21 @@ jobs: - name: Install dependencies uses: bahmutov/npm-install@v1 + - name: Wait for build-themes workflow + uses: lewagon/wait-on-check-action@v1.3.4 + with: + ref: ${{ github.sha }} + check-name: 'build-themes' + repo-token: ${{ secrets.GITHUB_TOKEN }} + wait-interval: 10 + + - name: Pull latest changes + run: | + git pull origin ${{ github.ref_name }} + - name: Create Release env: GH_TOKEN: ${{ secrets.GH_TOKEN }} NPM_TOKEN: ${{ secrets.NPM_TOKEN }} run: | - npm run build && npm run release -- --no-verify + npm run build && npm run release diff --git a/styles/src/tailwind.css b/styles/src/tailwind.css index fa04fecb..f95bd76d 100644 --- a/styles/src/tailwind.css +++ b/styles/src/tailwind.css @@ -10,8 +10,6 @@ Set the default cursor for buttons. */ -/* bump */ - button, [role='button'] { cursor: pointer; From fe2e442ece1fb86f6af9dbc41b1ab0dde12b8548 Mon Sep 17 00:00:00 2001 From: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Date: Mon, 18 Aug 2025 10:23:56 +0000 Subject: [PATCH 08/26] Update themes from token file --- styles/dist/tailwind.css | 2 -- 1 file changed, 2 deletions(-) diff --git a/styles/dist/tailwind.css b/styles/dist/tailwind.css index fa04fecb..f95bd76d 100644 --- a/styles/dist/tailwind.css +++ b/styles/dist/tailwind.css @@ -10,8 +10,6 @@ Set the default cursor for buttons. */ -/* bump */ - button, [role='button'] { cursor: pointer; From 87841303cde8bec5312f2dc2787a2227dcc3b621 Mon Sep 17 00:00:00 2001 From: Benjamin Leonard Date: Tue, 23 Sep 2025 16:57:00 +0100 Subject: [PATCH 09/26] Testing auto build add and commit --- styles/src/tokens.json | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/styles/src/tokens.json b/styles/src/tokens.json index 8f4e2fce..bad3d474 100644 --- a/styles/src/tokens.json +++ b/styles/src/tokens.json @@ -30,6 +30,10 @@ "suisse-intl": { "value": "Suisse Int'l", "type": "fontFamilies" + }, + "test": { + "value": "Test", + "type": "fontFamilies" } }, "mono": { From 352c9c071f32e1790b22cb75143e5fe5a5e003a4 Mon Sep 17 00:00:00 2001 From: Benjamin Leonard Date: Tue, 23 Sep 2025 16:59:12 +0100 Subject: [PATCH 10/26] Revert "Testing auto build add and commit" This reverts commit 87841303cde8bec5312f2dc2787a2227dcc3b621. --- styles/src/tokens.json | 4 ---- 1 file changed, 4 deletions(-) diff --git a/styles/src/tokens.json b/styles/src/tokens.json index bad3d474..8f4e2fce 100644 --- a/styles/src/tokens.json +++ b/styles/src/tokens.json @@ -30,10 +30,6 @@ "suisse-intl": { "value": "Suisse Int'l", "type": "fontFamilies" - }, - "test": { - "value": "Test", - "type": "fontFamilies" } }, "mono": { From 8c1da951d2db8cb5e69bc72f2618bc8bf81934aa Mon Sep 17 00:00:00 2001 From: Benjamin Leonard Date: Tue, 23 Sep 2025 17:00:08 +0100 Subject: [PATCH 11/26] Testing auto build and commit --- styles/src/tokens.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles/src/tokens.json b/styles/src/tokens.json index 8f4e2fce..6c35043e 100644 --- a/styles/src/tokens.json +++ b/styles/src/tokens.json @@ -2,7 +2,7 @@ "global": { "border-radius": { "sm": { - "value": "2", + "value": "200", "type": "borderRadius" }, "default": { From 6a88baa5ce5ae329d05b0de6b0eba4caf3507f4f Mon Sep 17 00:00:00 2001 From: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Date: Tue, 23 Sep 2025 16:00:47 +0000 Subject: [PATCH 12/26] Update themes from token file --- styles/dist/main.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles/dist/main.css b/styles/dist/main.css index 5d4ebb70..04f5d93b 100644 --- a/styles/dist/main.css +++ b/styles/dist/main.css @@ -519,7 +519,7 @@ --stroke-color-item-inactive: var(--chart-stroke-item-inactive); --stroke-color-error: var(--chart-stroke-error); - --radius-sm: 0.125rem; + --radius-sm: 12.5rem; --radius: 0.1875rem; --radius-lg: 0.375rem; --radius-xl: 0.75rem; From 2048c6a763bc33f72361eb2592e8c6785e4d5408 Mon Sep 17 00:00:00 2001 From: Benjamin Leonard Date: Tue, 23 Sep 2025 17:01:29 +0100 Subject: [PATCH 13/26] Revert token change --- styles/src/tokens.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles/src/tokens.json b/styles/src/tokens.json index 6c35043e..8f4e2fce 100644 --- a/styles/src/tokens.json +++ b/styles/src/tokens.json @@ -2,7 +2,7 @@ "global": { "border-radius": { "sm": { - "value": "200", + "value": "2", "type": "borderRadius" }, "default": { From 0de22b0c0c357da9b588101e229543891c48ca65 Mon Sep 17 00:00:00 2001 From: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Date: Tue, 23 Sep 2025 16:02:33 +0000 Subject: [PATCH 14/26] Update themes from token file --- styles/dist/main.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles/dist/main.css b/styles/dist/main.css index 04f5d93b..5d4ebb70 100644 --- a/styles/dist/main.css +++ b/styles/dist/main.css @@ -519,7 +519,7 @@ --stroke-color-item-inactive: var(--chart-stroke-item-inactive); --stroke-color-error: var(--chart-stroke-error); - --radius-sm: 12.5rem; + --radius-sm: 0.125rem; --radius: 0.1875rem; --radius-lg: 0.375rem; --radius-xl: 0.75rem; From 676010ae792a88b9621d72a0da7accc1e3ad07ea Mon Sep 17 00:00:00 2001 From: Benjamin Leonard Date: Tue, 23 Sep 2025 17:09:22 +0100 Subject: [PATCH 15/26] Try without the imported action --- .github/workflows/build-themes.yaml | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/.github/workflows/build-themes.yaml b/.github/workflows/build-themes.yaml index 38a218a6..bf197f77 100644 --- a/.github/workflows/build-themes.yaml +++ b/.github/workflows/build-themes.yaml @@ -12,7 +12,7 @@ jobs: contents: write steps: - name: Checkout Repository - uses: actions/checkout@v2 + uses: actions/checkout@v5 with: fetch-depth: 2 @@ -20,6 +20,7 @@ jobs: uses: actions/setup-node@v4 with: node-version: 22.x + cache: npm - name: Install dependencies run: npm install @@ -27,8 +28,14 @@ jobs: - name: Build themes run: npm run build:themes - - uses: EndBug/add-and-commit@v7 - with: - add: ./styles/dist - message: 'Update themes from token file' - default_author: github_actions + - name: Commit and push changes + run: | + git config --local user.email "action@github.com" + git config --local user.name "GitHub Action" + git add ./styles/dist + if ! git diff --staged --quiet; then + git commit -m "Update themes from token file" + git push + else + echo "No changes to commit" + fi From 3891579ff6a2c4c97a995117d3a48683b56eb62e Mon Sep 17 00:00:00 2001 From: Benjamin Leonard Date: Tue, 23 Sep 2025 17:09:47 +0100 Subject: [PATCH 16/26] Testing auto build and commit --- styles/src/tokens.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles/src/tokens.json b/styles/src/tokens.json index 8f4e2fce..6c35043e 100644 --- a/styles/src/tokens.json +++ b/styles/src/tokens.json @@ -2,7 +2,7 @@ "global": { "border-radius": { "sm": { - "value": "2", + "value": "200", "type": "borderRadius" }, "default": { From b372d268b7225cdeb3063c4f011f37dea92afc9d Mon Sep 17 00:00:00 2001 From: GitHub Action Date: Tue, 23 Sep 2025 16:10:18 +0000 Subject: [PATCH 17/26] Update themes from token file --- styles/dist/main.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles/dist/main.css b/styles/dist/main.css index 5d4ebb70..04f5d93b 100644 --- a/styles/dist/main.css +++ b/styles/dist/main.css @@ -519,7 +519,7 @@ --stroke-color-item-inactive: var(--chart-stroke-item-inactive); --stroke-color-error: var(--chart-stroke-error); - --radius-sm: 0.125rem; + --radius-sm: 12.5rem; --radius: 0.1875rem; --radius-lg: 0.375rem; --radius-xl: 0.75rem; From 2010f1c5eb78f2aab3a3204b2b5592815c218126 Mon Sep 17 00:00:00 2001 From: Benjamin Leonard Date: Tue, 23 Sep 2025 17:14:51 +0100 Subject: [PATCH 18/26] Revert "Testing auto build and commit" This reverts commit 3891579ff6a2c4c97a995117d3a48683b56eb62e. --- styles/src/tokens.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles/src/tokens.json b/styles/src/tokens.json index 6c35043e..8f4e2fce 100644 --- a/styles/src/tokens.json +++ b/styles/src/tokens.json @@ -2,7 +2,7 @@ "global": { "border-radius": { "sm": { - "value": "200", + "value": "2", "type": "borderRadius" }, "default": { From 0bd044aa098565a8871d2f3f3320eaece2667034 Mon Sep 17 00:00:00 2001 From: Benjamin Leonard Date: Tue, 23 Sep 2025 17:14:56 +0100 Subject: [PATCH 19/26] Alt bot details --- .github/workflows/build-themes.yaml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/build-themes.yaml b/.github/workflows/build-themes.yaml index bf197f77..4c078625 100644 --- a/.github/workflows/build-themes.yaml +++ b/.github/workflows/build-themes.yaml @@ -30,8 +30,8 @@ jobs: - name: Commit and push changes run: | - git config --local user.email "action@github.com" - git config --local user.name "GitHub Action" + git config --local user.email "41898282+github-actions[bot]@users.noreply.github.com" + git config --local user.name "github-actions[bot]" git add ./styles/dist if ! git diff --staged --quiet; then git commit -m "Update themes from token file" From 361bf40b8e0be1a4b85e5cfa571b5b51f51b313a Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Tue, 23 Sep 2025 16:16:04 +0000 Subject: [PATCH 20/26] Update themes from token file --- styles/dist/main.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles/dist/main.css b/styles/dist/main.css index 04f5d93b..5d4ebb70 100644 --- a/styles/dist/main.css +++ b/styles/dist/main.css @@ -519,7 +519,7 @@ --stroke-color-item-inactive: var(--chart-stroke-item-inactive); --stroke-color-error: var(--chart-stroke-error); - --radius-sm: 12.5rem; + --radius-sm: 0.125rem; --radius: 0.1875rem; --radius-lg: 0.375rem; --radius-xl: 0.75rem; From a402f4059423c4493155a592858c4f03e1ca612b Mon Sep 17 00:00:00 2001 From: Benjamin Leonard Date: Tue, 23 Sep 2025 17:19:37 +0100 Subject: [PATCH 21/26] Remove build themes do it all in the release action --- .github/workflows/build-themes.yaml | 41 ----------------------------- .github/workflows/release.yml | 38 +++++++++++++++----------- 2 files changed, 22 insertions(+), 57 deletions(-) delete mode 100644 .github/workflows/build-themes.yaml diff --git a/.github/workflows/build-themes.yaml b/.github/workflows/build-themes.yaml deleted file mode 100644 index 4c078625..00000000 --- a/.github/workflows/build-themes.yaml +++ /dev/null @@ -1,41 +0,0 @@ -name: Build Themes - -on: - workflow_dispatch: - push: - -jobs: - build-themes: - runs-on: ubuntu-latest - permissions: - pull-requests: write - contents: write - steps: - - name: Checkout Repository - uses: actions/checkout@v5 - with: - fetch-depth: 2 - - - name: Use Node.js 22.x - uses: actions/setup-node@v4 - with: - node-version: 22.x - cache: npm - - - name: Install dependencies - run: npm install - - - name: Build themes - run: npm run build:themes - - - name: Commit and push changes - run: | - git config --local user.email "41898282+github-actions[bot]@users.noreply.github.com" - git config --local user.name "github-actions[bot]" - git add ./styles/dist - if ! git diff --staged --quiet; then - git commit -m "Update themes from token file" - git push - else - echo "No changes to commit" - fi diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index e8853b01..602da57a 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -8,35 +8,41 @@ jobs: if: "!contains(github.event.head_commit.message, 'ci skip') && !contains(github.event.head_commit.message, 'skip ci')" + permissions: + pull-requests: write + contents: write steps: - - uses: actions/checkout@v2 - - - name: Prepare repository - run: git fetch --unshallow --tags + - uses: actions/checkout@v5 + with: + fetch-depth: 0 + token: ${{ secrets.GH_TOKEN }} - name: Use Node.js 22.x uses: actions/setup-node@v4 with: node-version: 22.x + cache: npm - name: Install dependencies - uses: bahmutov/npm-install@v1 + run: npm install - - name: Wait for build-themes workflow - uses: lewagon/wait-on-check-action@v1.3.4 - with: - ref: ${{ github.sha }} - check-name: 'build-themes' - repo-token: ${{ secrets.GITHUB_TOKEN }} - wait-interval: 10 + - name: Build + run: npm run build - - name: Pull latest changes + - name: Commit theme changes if needed run: | - git pull origin ${{ github.ref_name }} + git config --local user.email "41898282+github-actions[bot]@users.noreply.github.com" + git config --local user.name "github-actions[bot]" + git add ./styles/dist + if ! git diff --staged --quiet; then + git commit -m "Update themes from token file [ci skip]" + git push + else + echo "No changes to commit" + fi - name: Create Release env: GH_TOKEN: ${{ secrets.GH_TOKEN }} NPM_TOKEN: ${{ secrets.NPM_TOKEN }} - run: | - npm run build && npm run release + run: npm run release From 7cd7b922d67830480f1d1b88ae4095d0d1b0c67a Mon Sep 17 00:00:00 2001 From: Benjamin Leonard Date: Tue, 23 Sep 2025 17:20:31 +0100 Subject: [PATCH 22/26] Testing auto build add and commit --- styles/src/tokens.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles/src/tokens.json b/styles/src/tokens.json index 8f4e2fce..6c35043e 100644 --- a/styles/src/tokens.json +++ b/styles/src/tokens.json @@ -2,7 +2,7 @@ "global": { "border-radius": { "sm": { - "value": "2", + "value": "200", "type": "borderRadius" }, "default": { From d52b8922164e3c6d62567200d317791f89e4b6f3 Mon Sep 17 00:00:00 2001 From: Benjamin Leonard Date: Tue, 23 Sep 2025 17:22:14 +0100 Subject: [PATCH 23/26] Tweak checkout --- .github/workflows/release.yml | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 602da57a..6df8d866 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -13,9 +13,7 @@ jobs: contents: write steps: - uses: actions/checkout@v5 - with: - fetch-depth: 0 - token: ${{ secrets.GH_TOKEN }} + - run: git fetch --unshallow --tags - name: Use Node.js 22.x uses: actions/setup-node@v4 From eab444e2e544084adf9d31feb08b88d31ff94711 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Tue, 23 Sep 2025 16:22:55 +0000 Subject: [PATCH 24/26] Update themes from token file [ci skip] --- styles/dist/main.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles/dist/main.css b/styles/dist/main.css index 5d4ebb70..04f5d93b 100644 --- a/styles/dist/main.css +++ b/styles/dist/main.css @@ -519,7 +519,7 @@ --stroke-color-item-inactive: var(--chart-stroke-item-inactive); --stroke-color-error: var(--chart-stroke-error); - --radius-sm: 0.125rem; + --radius-sm: 12.5rem; --radius: 0.1875rem; --radius-lg: 0.375rem; --radius-xl: 0.75rem; From 7179d892c834f56937f6dd472f82148406c49ee7 Mon Sep 17 00:00:00 2001 From: Benjamin Leonard Date: Tue, 23 Sep 2025 17:24:23 +0100 Subject: [PATCH 25/26] Revert "Testing auto build add and commit" This reverts commit 7cd7b922d67830480f1d1b88ae4095d0d1b0c67a. --- styles/src/tokens.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles/src/tokens.json b/styles/src/tokens.json index 6c35043e..8f4e2fce 100644 --- a/styles/src/tokens.json +++ b/styles/src/tokens.json @@ -2,7 +2,7 @@ "global": { "border-radius": { "sm": { - "value": "200", + "value": "2", "type": "borderRadius" }, "default": { From 0ba24481f7ec8ecd8fb58b748ffafea699f4b9bb Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Tue, 23 Sep 2025 16:24:57 +0000 Subject: [PATCH 26/26] Update themes from token file [ci skip] --- styles/dist/main.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles/dist/main.css b/styles/dist/main.css index 04f5d93b..5d4ebb70 100644 --- a/styles/dist/main.css +++ b/styles/dist/main.css @@ -519,7 +519,7 @@ --stroke-color-item-inactive: var(--chart-stroke-item-inactive); --stroke-color-error: var(--chart-stroke-error); - --radius-sm: 12.5rem; + --radius-sm: 0.125rem; --radius: 0.1875rem; --radius-lg: 0.375rem; --radius-xl: 0.75rem;