Skip to content

Commit

Permalink
css refactor wip
Browse files Browse the repository at this point in the history
  • Loading branch information
Oksamies committed Oct 21, 2023
1 parent 189871a commit 3329b3e
Show file tree
Hide file tree
Showing 34 changed files with 479 additions and 303 deletions.
38 changes: 19 additions & 19 deletions apps/cyberstorm-storybook/stories/components/Button.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,143 +20,143 @@ const Template: StoryFn<typeof Button> = (args) => (
gap: "0.5rem",
}}
>
<Button.Root colorScheme="default" {...args}>
<Button.Root variant="default" {...args}>
<Button.ButtonLabel>default</Button.ButtonLabel>
<Button.ButtonIcon>
<Icon>
<FontAwesomeIcon icon={faChevronDown} />
</Icon>
</Button.ButtonIcon>
</Button.Root>
<Button.Root colorScheme="primary" {...args}>
<Button.Root variant="primary" {...args}>
<Button.ButtonLabel>primary</Button.ButtonLabel>
<Button.ButtonIcon>
<Icon>
<FontAwesomeIcon icon={faChevronDown} />
</Icon>
</Button.ButtonIcon>
</Button.Root>
<Button.Root colorScheme="tertiary" {...args}>
<Button.Root variant="tertiary" {...args}>
<Button.ButtonLabel>tertiary</Button.ButtonLabel>
<Button.ButtonIcon>
<Icon>
<FontAwesomeIcon icon={faChevronDown} />
</Icon>
</Button.ButtonIcon>
</Button.Root>
<Button.Root colorScheme="accent" {...args}>
<Button.Root variant="accent" {...args}>
<Button.ButtonLabel>accent</Button.ButtonLabel>
<Button.ButtonIcon>
<Icon>
<FontAwesomeIcon icon={faChevronDown} />
</Icon>
</Button.ButtonIcon>
</Button.Root>
<Button.Root colorScheme="fancyAccent" {...args}>
<Button.ButtonLabel>fancyAccent</Button.ButtonLabel>
<Button.Root variant="install" color="cyber-green" {...args}>
<Button.ButtonLabel>install</Button.ButtonLabel>
<Button.ButtonIcon>
<Icon>
<FontAwesomeIcon icon={faChevronDown} />
</Icon>
</Button.ButtonIcon>
</Button.Root>
<Button.Root colorScheme="success" {...args}>
<Button.Root variant="status" color="green" {...args}>
<Button.ButtonLabel>success</Button.ButtonLabel>
<Button.ButtonIcon>
<Icon>
<FontAwesomeIcon icon={faChevronDown} />
</Icon>
</Button.ButtonIcon>
</Button.Root>
<Button.Root colorScheme="warning" {...args}>
<Button.Root variant="status" color="red" {...args}>
<Button.ButtonLabel>warning</Button.ButtonLabel>
<Button.ButtonIcon>
<Icon>
<FontAwesomeIcon icon={faChevronDown} />
</Icon>
</Button.ButtonIcon>
</Button.Root>
<Button.Root colorScheme="danger" {...args}>
<Button.Root variant="alert" {...args}>
<Button.ButtonLabel>danger</Button.ButtonLabel>
<Button.ButtonIcon>
<Icon>
<FontAwesomeIcon icon={faChevronDown} />
</Icon>
</Button.ButtonIcon>
</Button.Root>
<Button.Root colorScheme="specialGreen" {...args}>
<Button.Root variant="specialGreen" {...args}>
<Button.ButtonLabel>specialGreen</Button.ButtonLabel>
<Button.ButtonIcon>
<Icon>
<FontAwesomeIcon icon={faChevronDown} />
</Icon>
</Button.ButtonIcon>
</Button.Root>
<Button.Root colorScheme="specialPurple" {...args}>
<Button.Root variant="specialPurple" {...args}>
<Button.ButtonLabel>specialPurple</Button.ButtonLabel>
<Button.ButtonIcon>
<Icon>
<FontAwesomeIcon icon={faChevronDown} />
</Icon>
</Button.ButtonIcon>
</Button.Root>
<Button.Root colorScheme="transparentDefault" {...args}>
<Button.Root variant="transparentDefault" {...args}>
<Button.ButtonLabel>transparentDefault</Button.ButtonLabel>
<Button.ButtonIcon>
<Icon>
<FontAwesomeIcon icon={faChevronDown} />
</Icon>
</Button.ButtonIcon>
</Button.Root>
<Button.Root colorScheme="transparentPrimary" {...args}>
<Button.Root variant="transparentPrimary" {...args}>
<Button.ButtonLabel>transparentPrimary</Button.ButtonLabel>
<Button.ButtonIcon>
<Icon>
<FontAwesomeIcon icon={faChevronDown} />
</Icon>
</Button.ButtonIcon>
</Button.Root>
<Button.Root colorScheme="transparentTertiary" {...args}>
<Button.Root variant="transparentTertiary" {...args}>
<Button.ButtonLabel>transparentTertiary</Button.ButtonLabel>
<Button.ButtonIcon>
<Icon>
<FontAwesomeIcon icon={faChevronDown} />
</Icon>
</Button.ButtonIcon>
</Button.Root>
<Button.Root colorScheme="transparentAccent" {...args}>
<Button.Root variant="transparentAccent" {...args}>
<Button.ButtonLabel>transparentAccent</Button.ButtonLabel>
<Button.ButtonIcon>
<Icon>
<FontAwesomeIcon icon={faChevronDown} />
</Icon>
</Button.ButtonIcon>
</Button.Root>
<Button.Root colorScheme="transparentDanger" {...args}>
<Button.Root variant="transparentDanger" {...args}>
<Button.ButtonLabel>transparentDanger</Button.ButtonLabel>
<Button.ButtonIcon>
<Icon>
<FontAwesomeIcon icon={faChevronDown} />
</Icon>
</Button.ButtonIcon>
</Button.Root>
<Button.Root colorScheme="discord" {...args}>
<Button.Root variant="discord" {...args}>
<Button.ButtonLabel>discord</Button.ButtonLabel>
<Button.ButtonIcon>
<Icon>
<FontAwesomeIcon icon={faChevronDown} />
</Icon>
</Button.ButtonIcon>
</Button.Root>
<Button.Root colorScheme="github" {...args}>
<Button.Root variant="github" {...args}>
<Button.ButtonLabel>github</Button.ButtonLabel>
<Button.ButtonIcon>
<Icon>
<FontAwesomeIcon icon={faChevronDown} />
</Icon>
</Button.ButtonIcon>
</Button.Root>
<Button.Root colorScheme="overwolf" {...args}>
<Button.Root variant="overwolf" {...args}>
<Button.ButtonLabel>overwolf</Button.ButtonLabel>
<Button.ButtonIcon>
<Icon>
Expand Down
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
"@types/node": "^18",
"@typescript-eslint/eslint-plugin": "^5.36.2",
"@typescript-eslint/parser": "^5.36.2",
"classnames": "^2.3.2",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-jsx-a11y": "^6.4.1",
Expand Down
1 change: 1 addition & 0 deletions packages/cyberstorm-styles/src/index.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import "./styles/reset.css";
import "./styles/colors.css";
import "./styles/spacing.css";
import "./styles/fonts.css";
import "./styles/theme.css";
import "./styles/globals.css";
112 changes: 112 additions & 0 deletions packages/cyberstorm-styles/src/styles/colors.css
Original file line number Diff line number Diff line change
Expand Up @@ -82,3 +82,115 @@
--color-red--10: rgb(48 11 18);
--color-red--11: rgb(24 6 9);
}

[data-color="red"] {
--color-1: var(--color-red--1);
--color-2: var(--color-red--2);
--color-3: var(--color-red--3);
--color-4: var(--color-red--4);
--color-5: var(--color-red--5);
--color-6: var(--color-red--6);
--color-7: var(--color-red--7);
--color-8: var(--color-red--8);
--color-9: var(--color-red--9);
--color-10: var(--color-red--10);
--color-11: var(--color-red--11);
}

[data-color="pink"] {
--color-1: var(--color-pink--90);
--color-2: var(--color-pink--80);
--color-3: var(--color-pink--70);
--color-4: var(--color-pink--60);
--color-5: var(--color-pink--50);
--color-6: var(--color-pink--40);
--color-7: var(--color-pink--30);
--color-8: var(--color-pink--20);
--color-9: var(--color-pink--10);
--color-10: none;
--color-11: none;
}

[data-color="orange"] {
--color-1: var(--color-orange--90);
--color-2: var(--color-orange--80);
--color-3: var(--color-orange--70);
--color-4: var(--color-orange--60);
--color-5: var(--color-orange--50);
--color-6: var(--color-orange--40);
--color-7: var(--color-orange--30);
--color-8: var(--color-orange--20);
--color-9: var(--color-orange--10);
--color-10: none;
--color-11: none;
}

[data-color="yellow"] {
--color-1: var(--color-yellow--1);
--color-2: var(--color-yellow--2);
--color-3: var(--color-yellow--3);
--color-4: var(--color-yellow--4);
--color-5: var(--color-yellow--5);
--color-6: var(--color-yellow--6);
--color-7: var(--color-yellow--7);
--color-8: var(--color-yellow--8);
--color-9: var(--color-yellow--9);
--color-10: var(--color-yellow--10);
--color-11: var(--color-yellow--11);
}

[data-color="green"] {
--color-1: var(--color-green--1);
--color-2: var(--color-green--2);
--color-3: var(--color-green--3);
--color-4: var(--color-green--4);
--color-5: var(--color-green--5);
--color-6: var(--color-green--6);
--color-7: var(--color-green--7);
--color-8: var(--color-green--8);
--color-9: var(--color-green--9);
--color-10: var(--color-green--10);
--color-11: var(--color-green--11);
}

[data-color="blue"] {
--color-1: var(--color-blue--90);
--color-2: var(--color-blue--80);
--color-3: var(--color-blue--70);
--color-4: var(--color-blue--60);
--color-5: var(--color-blue--50);
--color-6: var(--color-blue--40);
--color-7: var(--color-blue--30);
--color-8: var(--color-blue--20);
--color-9: var(--color-blue--10);
--color-10: none;
--color-11: none;
}

[data-color="cyber-green"] {
--color-1: var(--color-cyber-green--90);
--color-2: var(--color-cyber-green--80);
--color-3: var(--color-cyber-green--70);
--color-4: var(--color-cyber-green--60);
--color-5: var(--color-cyber-green--50);
--color-6: var(--color-cyber-green--40);
--color-7: var(--color-cyber-green--30);
--color-8: var(--color-cyber-green--20);
--color-9: var(--color-cyber-green--10);
--color-10: none;
--color-11: none;
}

[data-color="purple"] {
--color-1: var(--color-purple--1);
--color-2: var(--color-purple--2);
--color-3: var(--color-purple--3);
--color-4: var(--color-purple--4);
--color-5: var(--color-purple--5);
--color-6: var(--color-purple--6);
--color-7: var(--color-purple--7);
--color-8: var(--color-purple--8);
--color-9: var(--color-purple--9);
--color-10: var(--color-purple--10);
--color-11: none;
}
79 changes: 79 additions & 0 deletions packages/cyberstorm-styles/src/styles/spacing.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
:root {
--space-1: calc(4px * var(--scaling));
--space-2: calc(8px * var(--scaling));
--space-3: calc(12px * var(--scaling));
--space-4: calc(16px * var(--scaling));
--space-5: calc(24px * var(--scaling));
--space-6: calc(32px * var(--scaling));
--space-7: calc(40px * var(--scaling));
--space-8: calc(48px * var(--scaling));
--space-9: calc(64px * var(--scaling));
--font-size-1: calc(12px * var(--scaling));
--font-size-2: calc(14px * var(--scaling));
--font-size-3: calc(16px * var(--scaling));
--font-size-4: calc(18px * var(--scaling));
--font-size-5: calc(20px * var(--scaling));
--font-size-6: calc(24px * var(--scaling));
--font-size-7: calc(28px * var(--scaling));
--font-size-8: calc(35px * var(--scaling));
--font-size-9: calc(60px * var(--scaling));
--font-weight-lightest: 300;
--font-weight-light: 400;
--font-weight-regular: 500;
--font-weight-medium: 600;
--font-weight-bold: 700;
--font-weight-boldest: 800;
--line-height-1: calc(16px * var(--scaling));
--line-height-2: calc(20px * var(--scaling));
--line-height-3: calc(24px * var(--scaling));
--line-height-4: calc(26px * var(--scaling));
--line-height-5: calc(28px * var(--scaling));
--line-height-6: calc(30px * var(--scaling));
--line-height-7: calc(36px * var(--scaling));
--line-height-8: calc(40px * var(--scaling));
--line-height-9: calc(60px * var(--scaling));
--letter-spacing-1: 0.0025em;
--letter-spacing-2: 0;
--letter-spacing-3: 0;
--letter-spacing-4: -0.0025em;
--letter-spacing-5: -0.005em;
--letter-spacing-6: -0.00625em;
--letter-spacing-7: -0.0075em;
--letter-spacing-8: -0.01em;
--letter-spacing-9: -0.025em;
--default-font-family: inter;
--default-font-size: var(--font-size-3);
--default-font-style: normal;
--default-font-weight: var(--font-weight-regular);
--default-line-height: 1;
--default-letter-spacing: 0;

font-weight: var(--default-font-weight);
font-size: var(--default-font-size);
font-family: var(--default-font-family);
font-style: var(--default-font-style);
line-height: var(--default-line-height);
letter-spacing: var(--default-letter-spacing);
overflow-wrap: break-word;
text-size-adjust: none;
}

[data-scaling="90%"] {
--scaling: 0.9;
}

[data-scaling="95%"] {
--scaling: 0.95;
}

[data-scaling="100%"] {
--scaling: 1;
}

[data-scaling="105%"] {
--scaling: 1.05;
}

[data-scaling="110%"] {
--scaling: 1.1;
}
1 change: 1 addition & 0 deletions packages/cyberstorm-styles/src/styles/theme.css
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@
--color-text--secondary: rgb(196 192 216);
--color-text--accent: rgb(198 195 255);
--color-text--tertiary: rgb(164 164 188);
--color-text--darker: rgb(156 156 196);
--alert-info-bg-color: rgb(8 49 73);
--alert-success-bg-color: rgb(24 65 48);
--alert-warning-bg-color: rgb(73 62 24);
Expand Down
Loading

0 comments on commit 3329b3e

Please sign in to comment.