Skip to content

Commit

Permalink
pkp/pkp-lib#10850 Rename css file for tailwind theme css variables
Browse files Browse the repository at this point in the history
  • Loading branch information
@blesildaramirez
blesildaramirez committed Feb 11, 2025
1 parent ccbb2cb commit bb71759
Show file tree
Hide file tree
Showing 4 changed files with 155 additions and 155 deletions.
2 changes: 1 addition & 1 deletion .storybook/preview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ import VueScrollTo from 'vue-scrollto';

import '../src/styles/_import.less';
import '../src/styles/_global.less';
import '../src/styles/style.css';
import '../src/styles/tw-theme-vars.css';
import {allModes} from './modes';
import {initialize, mswLoader} from 'msw-storybook-addon';

Expand Down
2 changes: 1 addition & 1 deletion src/docs/guide/DesignSystem/_CSSVariables.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import * as _CSSVariablesStories from './_CSSVariables.stories.js';

<Meta title="Guide/Style/CSS Variables" />

# Css Variables
# CSS Variables

List of CSS variables that you can use directly when designing a plugin. These variables are derived from Tailwind's utility classes, specifically based on our theme configuration.

Expand Down
153 changes: 0 additions & 153 deletions src/styles/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,153 +0,0 @@
:root {
--background-color-primary: #006798;
--background-color-hover: #0082bf;
--background-color-attention: #d00a0a;
--background-color-success: #00b24e;
--background-color-negative: #d00a6c;
--background-color-stage-desk-review: #9b6ff8;
--background-color-stage-in-review: #e08914;
--background-color-stage-copyediting: #f66aaf;
--background-color-stage-production: #4ac7e2;
--background-color-stage-scheduled-for-publishing: #ded15d;
--background-color-stage-incomplete-submission: #777777;
--background-color-stage-published: #00b24e;
--background-color-stage-declined: #d00a0a;
--background-color-profile-1: #ab7d94;
--background-color-profile-2: #598d70;
--background-color-profile-3: #9b7cdc;
--background-color-profile-4: #89aae0;
--background-color-profile-5: #ebda68;
--background-color-profile-6: #bd726c;
--background-color-transparent: transparent;
--background-color-default: #eaedee;
--background-color-secondary: #ffffff;
--background-color-tertiary: rgba(234, 237, 238, 0.3);
--background-color-blur: rgba(0, 0, 0, 0.5);
--background-color-selection-light: #d5e9f2;
--background-color-selection-dark: #002c40;
--background-color-disabled: rgba(28, 27, 31, 0.1);
--text-color-primary: #006798;
--text-color-hover: #0082bf;
--text-color-attention: #d00a0a;
--text-color-success: #00b24e;
--text-color-negative: #d00a6c;
--text-color-stage-desk-review: #9b6ff8;
--text-color-stage-in-review: #e08914;
--text-color-stage-copyediting: #f66aaf;
--text-color-stage-production: #4ac7e2;
--text-color-stage-scheduled-for-publishing: #ded15d;
--text-color-stage-incomplete-submission: #777777;
--text-color-stage-published: #00b24e;
--text-color-stage-declined: #d00a0a;
--text-color-profile-1: #ab7d94;
--text-color-profile-2: #598d70;
--text-color-profile-3: #9b7cdc;
--text-color-profile-4: #89aae0;
--text-color-profile-5: #ebda68;
--text-color-profile-6: #bd726c;
--text-color-transparent: transparent;
--text-color-default: #222222;
--text-color-secondary: #505050;
--text-color-heading: #01354f;
--text-color-disabled: #4e4f4f;
--text-color-on-dark: #ffffff;
--border-color-primary: #006798;
--border-color-hover: #0082bf;
--border-color-attention: #d00a0a;
--border-color-success: #00b24e;
--border-color-negative: #d00a6c;
--border-color-stage-desk-review: #9b6ff8;
--border-color-stage-in-review: #e08914;
--border-color-stage-copyediting: #f66aaf;
--border-color-stage-production: #4ac7e2;
--border-color-stage-scheduled-for-publishing: #ded15d;
--border-color-stage-incomplete-submission: #777777;
--border-color-stage-published: #00b24e;
--border-color-stage-declined: #d00a0a;
--border-color-profile-1: #ab7d94;
--border-color-profile-2: #598d70;
--border-color-profile-3: #9b7cdc;
--border-color-profile-4: #89aae0;
--border-color-profile-5: #ebda68;
--border-color-profile-6: #bd726c;
--border-color-transparent: transparent;
--border-color-dark: #696969;
--border-color-light: #bbbbbb;
--border-color-form-fields: #777777;
--radius: 4px;
--radius-full: 9999px;
--shadow: 0 0 4px rgba(0, 0, 0, 0.5);
--color-primary: #006798;
--color-hover: #0082bf;
--color-attention: #d00a0a;
--color-success: #00b24e;
--color-negative: #d00a6c;
--color-stage-desk-review: #9b6ff8;
--color-stage-in-review: #e08914;
--color-stage-copyediting: #f66aaf;
--color-stage-production: #4ac7e2;
--color-stage-scheduled-for-publishing: #ded15d;
--color-stage-incomplete-submission: #777777;
--color-stage-published: #00b24e;
--color-stage-declined: #d00a0a;
--color-profile-1: #ab7d94;
--color-profile-2: #598d70;
--color-profile-3: #9b7cdc;
--color-profile-4: #89aae0;
--color-profile-5: #ebda68;
--color-profile-6: #bd726c;
--color-transparent: transparent;
--font-sans: 'Noto Sans', ui-sans-serif, system-ui, sans-serif,
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--text-xs-normal: 0.625rem;
--text-xs-normal--line-height: 0.75rem;
--text-xs-normal--font-weight: 400;
--text-sm-light: 0.6875rem;
--text-sm-light--line-height: 0.875rem;
--text-sm-light--font-weight: 300;
--text-sm-normal: 0.6875rem;
--text-sm-normal--line-height: 0.875rem;
--text-sm-normal--font-weight: 400;
--text-base-light: 0.75rem;
--text-base-light--line-height: 1rem;
--text-base-light--font-weight: 300;
--text-base-normal: 0.75rem;
--text-base-normal--line-height: 1rem;
--text-base-normal--font-weight: 400;
--text-base-bold: 0.75rem;
--text-base-bold--line-height: 1rem;
--text-base-bold--font-weight: 700;
--text-lg-normal: 0.875rem;
--text-lg-normal--line-height: 1.25rem;
--text-lg-normal--font-weight: 400;
--text-lg-medium: 0.875rem;
--text-lg-medium--line-height: 1.25rem;
--text-lg-medium--font-weight: 500;
--text-lg-semibold: 0.875rem;
--text-lg-semibold--line-height: 1.25rem;
--text-lg-semibold--font-weight: 600;
--text-lg-bold: 0.875rem;
--text-lg-bold--line-height: 1.25rem;
--text-lg-bold--font-weight: 700;
--text-xl-bold: 1rem;
--text-xl-bold--line-height: 1.5rem;
--text-xl-bold--font-weight: 700;
--text-2xl-bold: 1.125rem;
--text-2xl-bold--line-height: 1.75rem;
--text-2xl-bold--font-weight: 700;
--text-3xl-normal: 1.25rem;
--text-3xl-normal--line-height: 1.75rem;
--text-3xl-normal--font-weight: 400;
--text-3xl-medium: 1.25rem;
--text-3xl-medium--line-height: 1.75rem;
--text-3xl-medium--font-weight: 500;
--text-3xl-bold: 1.25rem;
--text-3xl-bold--line-height: 1.75rem;
--text-3xl-bold--font-weight: 700;
--text-4xl-bold: 1.5rem;
--text-4xl-bold--line-height: 2rem;
--text-4xl-bold--font-weight: 700;
--text-5xl-bold: 2.25rem;
--text-5xl-bold--line-height: 2.5rem;
--text-5xl-bold--font-weight: 700;
}
153 changes: 153 additions & 0 deletions src/styles/tw-theme-vars.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,153 @@
:root {
--background-color-primary: #006798;
--background-color-hover: #0082bf;
--background-color-attention: #d00a0a;
--background-color-success: #00b24e;
--background-color-negative: #d00a6c;
--background-color-stage-desk-review: #9b6ff8;
--background-color-stage-in-review: #e08914;
--background-color-stage-copyediting: #f66aaf;
--background-color-stage-production: #4ac7e2;
--background-color-stage-scheduled-for-publishing: #ded15d;
--background-color-stage-incomplete-submission: #777777;
--background-color-stage-published: #00b24e;
--background-color-stage-declined: #d00a0a;
--background-color-profile-1: #ab7d94;
--background-color-profile-2: #598d70;
--background-color-profile-3: #9b7cdc;
--background-color-profile-4: #89aae0;
--background-color-profile-5: #ebda68;
--background-color-profile-6: #bd726c;
--background-color-transparent: transparent;
--background-color-default: #eaedee;
--background-color-secondary: #ffffff;
--background-color-tertiary: rgba(234, 237, 238, 0.3);
--background-color-blur: rgba(0, 0, 0, 0.5);
--background-color-selection-light: #d5e9f2;
--background-color-selection-dark: #002c40;
--background-color-disabled: rgba(28, 27, 31, 0.1);
--text-color-primary: #006798;
--text-color-hover: #0082bf;
--text-color-attention: #d00a0a;
--text-color-success: #00b24e;
--text-color-negative: #d00a6c;
--text-color-stage-desk-review: #9b6ff8;
--text-color-stage-in-review: #e08914;
--text-color-stage-copyediting: #f66aaf;
--text-color-stage-production: #4ac7e2;
--text-color-stage-scheduled-for-publishing: #ded15d;
--text-color-stage-incomplete-submission: #777777;
--text-color-stage-published: #00b24e;
--text-color-stage-declined: #d00a0a;
--text-color-profile-1: #ab7d94;
--text-color-profile-2: #598d70;
--text-color-profile-3: #9b7cdc;
--text-color-profile-4: #89aae0;
--text-color-profile-5: #ebda68;
--text-color-profile-6: #bd726c;
--text-color-transparent: transparent;
--text-color-default: #222222;
--text-color-secondary: #505050;
--text-color-heading: #01354f;
--text-color-disabled: #4e4f4f;
--text-color-on-dark: #ffffff;
--border-color-primary: #006798;
--border-color-hover: #0082bf;
--border-color-attention: #d00a0a;
--border-color-success: #00b24e;
--border-color-negative: #d00a6c;
--border-color-stage-desk-review: #9b6ff8;
--border-color-stage-in-review: #e08914;
--border-color-stage-copyediting: #f66aaf;
--border-color-stage-production: #4ac7e2;
--border-color-stage-scheduled-for-publishing: #ded15d;
--border-color-stage-incomplete-submission: #777777;
--border-color-stage-published: #00b24e;
--border-color-stage-declined: #d00a0a;
--border-color-profile-1: #ab7d94;
--border-color-profile-2: #598d70;
--border-color-profile-3: #9b7cdc;
--border-color-profile-4: #89aae0;
--border-color-profile-5: #ebda68;
--border-color-profile-6: #bd726c;
--border-color-transparent: transparent;
--border-color-dark: #696969;
--border-color-light: #bbbbbb;
--border-color-form-fields: #777777;
--radius: 4px;
--radius-full: 9999px;
--shadow: 0 0 4px rgba(0, 0, 0, 0.5);
--color-primary: #006798;
--color-hover: #0082bf;
--color-attention: #d00a0a;
--color-success: #00b24e;
--color-negative: #d00a6c;
--color-stage-desk-review: #9b6ff8;
--color-stage-in-review: #e08914;
--color-stage-copyediting: #f66aaf;
--color-stage-production: #4ac7e2;
--color-stage-scheduled-for-publishing: #ded15d;
--color-stage-incomplete-submission: #777777;
--color-stage-published: #00b24e;
--color-stage-declined: #d00a0a;
--color-profile-1: #ab7d94;
--color-profile-2: #598d70;
--color-profile-3: #9b7cdc;
--color-profile-4: #89aae0;
--color-profile-5: #ebda68;
--color-profile-6: #bd726c;
--color-transparent: transparent;
--font-sans: 'Noto Sans', ui-sans-serif, system-ui, sans-serif,
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--text-xs-normal: 0.625rem;
--text-xs-normal--line-height: 0.75rem;
--text-xs-normal--font-weight: 400;
--text-sm-light: 0.6875rem;
--text-sm-light--line-height: 0.875rem;
--text-sm-light--font-weight: 300;
--text-sm-normal: 0.6875rem;
--text-sm-normal--line-height: 0.875rem;
--text-sm-normal--font-weight: 400;
--text-base-light: 0.75rem;
--text-base-light--line-height: 1rem;
--text-base-light--font-weight: 300;
--text-base-normal: 0.75rem;
--text-base-normal--line-height: 1rem;
--text-base-normal--font-weight: 400;
--text-base-bold: 0.75rem;
--text-base-bold--line-height: 1rem;
--text-base-bold--font-weight: 700;
--text-lg-normal: 0.875rem;
--text-lg-normal--line-height: 1.25rem;
--text-lg-normal--font-weight: 400;
--text-lg-medium: 0.875rem;
--text-lg-medium--line-height: 1.25rem;
--text-lg-medium--font-weight: 500;
--text-lg-semibold: 0.875rem;
--text-lg-semibold--line-height: 1.25rem;
--text-lg-semibold--font-weight: 600;
--text-lg-bold: 0.875rem;
--text-lg-bold--line-height: 1.25rem;
--text-lg-bold--font-weight: 700;
--text-xl-bold: 1rem;
--text-xl-bold--line-height: 1.5rem;
--text-xl-bold--font-weight: 700;
--text-2xl-bold: 1.125rem;
--text-2xl-bold--line-height: 1.75rem;
--text-2xl-bold--font-weight: 700;
--text-3xl-normal: 1.25rem;
--text-3xl-normal--line-height: 1.75rem;
--text-3xl-normal--font-weight: 400;
--text-3xl-medium: 1.25rem;
--text-3xl-medium--line-height: 1.75rem;
--text-3xl-medium--font-weight: 500;
--text-3xl-bold: 1.25rem;
--text-3xl-bold--line-height: 1.75rem;
--text-3xl-bold--font-weight: 700;
--text-4xl-bold: 1.5rem;
--text-4xl-bold--line-height: 2rem;
--text-4xl-bold--font-weight: 700;
--text-5xl-bold: 2.25rem;
--text-5xl-bold--line-height: 2.5rem;
--text-5xl-bold--font-weight: 700;
}

0 comments on commit bb71759

Please sign in to comment.