Skip to content

Commit

Permalink
refactor: update cobalt-ui to terrazzo (#85)
Browse files Browse the repository at this point in the history 
Co-authored-by: Lukas Taake <[email protected]>
  • Loading branch information
@christoph-fricke @mrm1st3r
christoph-fricke and mrm1st3r authored Dec 13, 2024
1 parent d8c0d72 commit 1073594
Show file tree
Hide file tree
Showing 8 changed files with 507 additions and 956 deletions.
1,101 changes: 340 additions & 761 deletions package-lock.json
View file

Large diffs are not rendered by default.

12 changes: 6 additions & 6 deletions packages/documentation/src/design_tokens/colors.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,17 +109,17 @@ Tones of black and whites that are mainly used for typography.
<ColorItem
title="Base Black"
colors={{
primary: "var(--hap-primitives-color-base-blackprimary)",
secondary: "var(--hap-primitives-color-base-blacksecondary)",
tertiary: "var(--hap-primitives-color-base-blacktertiary)",
primary: "var(--hap-primitives-color-base-black-primary)",
secondary: "var(--hap-primitives-color-base-black-secondary)",
tertiary: "var(--hap-primitives-color-base-black-tertiary)",
}}
/>
<ColorItem
title="Base White"
colors={{
primary: "var(--hap-primitives-color-base-whiteprimary)",
secondary: "var(--hap-primitives-color-base-whitesecondary)",
tertiary: "var(--hap-primitives-color-base-whitetertiary)",
primary: "var(--hap-primitives-color-base-white-primary)",
secondary: "var(--hap-primitives-color-base-white-secondary)",
tertiary: "var(--hap-primitives-color-base-white-tertiary)",
}}
/>
</ColorPalette>
13 changes: 10 additions & 3 deletions packages/documentation/src/foundation/typography.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,15 @@ Playfulness.
Headings use the ES Klarheit Kurrent. The following heading styles are provided:

<Typography
sampleText="The quick brown fox jumps over the lazy dog"
fontClasses={["hap-h1", "hap-h2", "hap-h3", "hap-h4", "hap-h5", "hap-h6"]}
sampleText="Headline 3XL"
fontClasses={[
"hap-headline-3xl",
"hap-headline-2xl",
"hap-headline-xl",
"hap-headline-lg",
"hap-headline-md",
"hap-headline-sm",
]}
></Typography>

## Body Text
Expand All @@ -31,5 +38,5 @@ provided:

<Typography
sampleText="The quick brown fox jumps over the lazy dog"
fontClasses={["hap-text-large", "hap-text", "hap-text-small"]}
fontClasses={["hap-text", "hap-text-sm", "hap-text-xs"]}
></Typography>
10 changes: 5 additions & 5 deletions packages/foundation/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,12 @@
"./atomic-playfulness.css": "./src/atomic-playfulness.css"
},
"scripts": {
"build": "co build",
"check": "co check",
"lint": "eslint ."
"dev": "tz build -w",
"build": "tz build",
"lint": "eslint . && tz lint"
},
"devDependencies": {
"@cobalt-ui/cli": "^1.11.2",
"@cobalt-ui/plugin-css": "^1.7.4"
"@terrazzo/cli": "^0.2.8",
"@terrazzo/plugin-css": "^0.2.0"
}
}
148 changes: 74 additions & 74 deletions packages/foundation/src/elements/button.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,183 +28,183 @@

&.primary {
color: light-dark(
var(--hap-color-text-brand-ondark),
var(--hap-color-text-brand-onlight)
var(--hap-color-text-brand-on-dark),
var(--hap-color-text-brand-on-light)
);
background-color: light-dark(
var(--hap-color-button-primary-onlight-default),
var(--hap-color-button-primary-ondark-default)
var(--hap-color-button-primary-on-light-default),
var(--hap-color-button-primary-on-dark-default)
);

&:hover {
color: light-dark(
var(--hap-color-text-brand-ondark),
var(--hap-color-text-brand-onlight)
var(--hap-color-text-brand-on-dark),
var(--hap-color-text-brand-on-light)
);
background-color: light-dark(
var(--hap-color-button-primary-onlight-hovered),
var(--hap-color-button-primary-ondark-hovered)
var(--hap-color-button-primary-on-light-hovered),
var(--hap-color-button-primary-on-dark-hovered)
);
}

&:focus,
&:focus-visible {
color: light-dark(
var(--hap-color-text-brand-ondark),
var(--hap-color-text-brand-onlight)
var(--hap-color-text-brand-on-dark),
var(--hap-color-text-brand-on-light)
);
background-color: light-dark(
var(--hap-color-button-primary-onlight-default),
var(--hap-color-button-primary-ondark-default)
var(--hap-color-button-primary-on-light-default),
var(--hap-color-button-primary-on-dark-default)
);
box-shadow: inset 0 0 0 2px
light-dark(
var(--hap-color-border-focused-onlight),
var(--hap-color-border-focused-ondark)
var(--hap-color-border-focused-on-light),
var(--hap-color-border-focused-on-dark)
);
}

&:active {
color: light-dark(
var(--hap-color-text-brand-ondark),
var(--hap-color-text-brand-onlight)
var(--hap-color-text-brand-on-dark),
var(--hap-color-text-brand-on-light)
);
background-color: light-dark(
var(--hap-color-button-primary-onlight-pressed),
var(--hap-color-button-primary-ondark-pressed)
var(--hap-color-button-primary-on-light-pressed),
var(--hap-color-button-primary-on-dark-pressed)
);
}

&:disabled {
color: light-dark(
var(--hap-color-text-brand-ondark),
var(--hap-color-text-brand-onlight)
var(--hap-color-text-brand-on-dark),
var(--hap-color-text-brand-on-light)
);
background-color: light-dark(
var(--hap-color-button-primary-onlight-default),
var(--hap-color-button-primary-ondark-default)
var(--hap-color-button-primary-on-light-default),
var(--hap-color-button-primary-on-dark-default)
);
}
}

&.secondary {
color: light-dark(
var(--hap-color-text-brand-onlight),
var(--hap-color-text-brand-ondark)
var(--hap-color-text-brand-on-light),
var(--hap-color-text-brand-on-dark)
);
background-color: none;
box-shadow: inset 0 0 0 1px
light-dark(
var(--hap-color-border-brand-onlight),
var(--hap-color-border-brand-ondarkonly)
var(--hap-color-border-brand-on-light),
var(--hap-color-border-brand-on-dark-only)
);

&:hover {
color: light-dark(
var(--hap-color-text-brand-onlight),
var(--hap-color-text-brand-ondarkonly)
var(--hap-color-text-brand-on-light),
var(--hap-color-text-brand-on-dark-only)
);
background-color: light-dark(
var(--hap-color-interactions-onlight-hovered),
var(--hap-color-interactions-ondarkonly-hovered)
var(--hap-color-interactions-on-light-hovered),
var(--hap-color-interactions-on-dark-only-hovered)
);
box-shadow: inset 0 0 0 1px
light-dark(
var(--hap-color-border-brand-onlight),
var(--hap-color-border-brand-ondarkonly)
var(--hap-color-border-brand-on-light),
var(--hap-color-border-brand-on-dark-only)
);
}

&:focus,
&:focus-visible {
color: light-dark(
var(--hap-color-text-brand-onlight),
var(--hap-color-text-brand-ondarkonly)
var(--hap-color-text-brand-on-light),
var(--hap-color-text-brand-on-dark-only)
);
box-shadow: inset 0 0 0 2px
light-dark(
var(--hap-color-border-focused-onlight),
var(--hap-color-border-focused-ondark)
var(--hap-color-border-focused-on-light),
var(--hap-color-border-focused-on-dark)
);
}

&:active {
color: light-dark(
var(--hap-color-text-brand-onlight),
var(--hap-color-text-brand-ondarkonly)
var(--hap-color-text-brand-on-light),
var(--hap-color-text-brand-on-dark-only)
);
background-color: light-dark(
var(--hap-color-interactions-onlight-pressed),
var(--hap-color-interactions-ondarkonly-pressed)
var(--hap-color-interactions-on-light-pressed),
var(--hap-color-interactions-on-dark-only-pressed)
);
box-shadow: inset 0 0 0 1px
light-dark(
var(--hap-color-border-brand-onlight),
var(--hap-color-border-brand-ondarkonly)
var(--hap-color-border-brand-on-light),
var(--hap-color-border-brand-on-dark-only)
);
}

&:disabled {
color: light-dark(
var(--hap-color-text-brand-onlight),
var(--hap-color-text-brand-ondarkonly)
var(--hap-color-text-brand-on-light),
var(--hap-color-text-brand-on-dark-only)
);
background-color: none;
box-shadow: inset 0 0 0 1px
light-dark(
var(--hap-color-border-brand-onlight),
var(--hap-color-border-brand-ondarkonly)
var(--hap-color-border-brand-on-light),
var(--hap-color-border-brand-on-dark-only)
);
}
}

/* same as secondary but without borders in some states */
&.tertiary {
color: light-dark(
var(--hap-color-text-brand-onlight),
var(--hap-color-text-brand-ondark)
var(--hap-color-text-brand-on-light),
var(--hap-color-text-brand-on-dark)
);
background-color: none;

&:hover {
color: light-dark(
var(--hap-color-text-brand-onlight),
var(--hap-color-text-brand-ondarkonly)
var(--hap-color-text-brand-on-light),
var(--hap-color-text-brand-on-dark-only)
);
background-color: light-dark(
var(--hap-color-interactions-onlight-hovered),
var(--hap-color-interactions-ondarkonly-hovered)
var(--hap-color-interactions-on-light-hovered),
var(--hap-color-interactions-on-dark-only-hovered)
);
}

&:focus,
&:focus-visible {
color: light-dark(
var(--hap-color-text-brand-onlight),
var(--hap-color-text-brand-ondarkonly)
var(--hap-color-text-brand-on-light),
var(--hap-color-text-brand-on-dark-only)
);
box-shadow: inset 0 0 0 2px
light-dark(
var(--hap-color-border-focused-onlight),
var(--hap-color-border-focused-ondark)
var(--hap-color-border-focused-on-light),
var(--hap-color-border-focused-on-dark)
);
}

&:active {
color: light-dark(
var(--hap-color-text-brand-onlight),
var(--hap-color-text-brand-ondarkonly)
var(--hap-color-text-brand-on-light),
var(--hap-color-text-brand-on-dark-only)
);
background-color: light-dark(
var(--hap-color-interactions-onlight-pressed),
var(--hap-color-interactions-ondarkonly-pressed)
var(--hap-color-interactions-on-light-pressed),
var(--hap-color-interactions-on-dark-only-pressed)
);
}

&:disabled {
color: light-dark(
var(--hap-color-text-brand-onlight),
var(--hap-color-text-brand-ondarkonly)
var(--hap-color-text-brand-on-light),
var(--hap-color-text-brand-on-dark-only)
);
background-color: none;
}
Expand All @@ -216,8 +216,8 @@
var(--hap-color-feedback-critical-light)
);
background-color: light-dark(
var(--hap-color-button-destructive-onlight-default),
var(--hap-color-button-destructive-ondark-default)
var(--hap-color-button-destructive-on-light-default),
var(--hap-color-button-destructive-on-dark-default)
);

&:hover {
Expand All @@ -226,8 +226,8 @@
var(--hap-color-feedback-critical-light)
);
background-color: light-dark(
var(--hap-color-button-destructive-onlight-hovered),
var(--hap-color-button-destructive-ondark-hovered)
var(--hap-color-button-destructive-on-light-hovered),
var(--hap-color-button-destructive-on-dark-hovered)
);
}

Expand All @@ -238,13 +238,13 @@
var(--hap-color-feedback-critical-light)
);
background-color: light-dark(
var(--hap-color-button-destructive-onlight-hovered),
var(--hap-color-button-destructive-ondark-hovered)
var(--hap-color-button-destructive-on-light-hovered),
var(--hap-color-button-destructive-on-dark-hovered)
);
box-shadow: inset 0 0 0 2px
light-dark(
var(--hap-color-border-focused-onlight),
var(--hap-color-border-focused-ondark)
var(--hap-color-border-focused-on-light),
var(--hap-color-border-focused-on-dark)
);
}

Expand All @@ -254,8 +254,8 @@
var(--hap-color-feedback-critical-light)
);
background-color: light-dark(
var(--hap-color-button-destructive-onlight-pressed),
var(--hap-color-button-destructive-ondark-pressed)
var(--hap-color-button-destructive-on-light-pressed),
var(--hap-color-button-destructive-on-dark-pressed)
);
}

Expand All @@ -265,8 +265,8 @@
var(--hap-color-feedback-critical-light)
);
background-color: light-dark(
var(--hap-color-button-destructive-onlight-default),
var(--hap-color-button-destructive-ondark-default)
var(--hap-color-button-destructive-on-light-default),
var(--hap-color-button-destructive-on-dark-default)
);
}
}
Expand Down
Loading

0 comments on commit 1073594

Please sign in to comment.