From 498941c9afed1011b017149e5b73977ec5760a78 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kristoffer=20Nordstr=C3=B6m?= <totte.nordstrom@gmail.com>
Date: Wed, 8 Feb 2023 14:41:38 +0100
Subject: [PATCH] feat!: change tokens
---
packages/button/button.pcss | 18 +--
packages/core/custom-properties.pcss | 5 -
packages/core/index.pcss | 4 +-
packages/core/stories/Spacing.stories.mdx | 7 +-
packages/core/tokens/size.json | 63 +++++++++++
packages/core/tokens/zindex.json | 7 ++
packages/core/typography.pcss | 128 ++++++++++++----------
packages/pagination/pagination.pcss | 12 +-
8 files changed, 163 insertions(+), 81 deletions(-)
create mode 100644 packages/core/tokens/zindex.json
diff --git a/packages/button/button.pcss b/packages/button/button.pcss
index 48deaaa60..d4ea8522f 100644
--- a/packages/button/button.pcss
+++ b/packages/button/button.pcss
@@ -11,25 +11,25 @@
cursor: pointer;
display: flex;
flex-direction: row;
- font-size: var(--sds-size-base-s2);
- line-height: var(--sds-size-base-m);
- padding: 12px;
+ font-size: var(--sds-fontsize-base-s2);
+ line-height: var(--sds-fontsize-base-m);
+ padding: var(--sds-size-base-s);
&__label {
- padding: 0 16px;
+ padding: 0 var(--sds-size-base-s1);
}
&__icon {
align-items: center;
display: inline-flex;
- font-size: var(--sds-size-base-m);
+ font-size: var(--sds-fontsize-base-m);
justify-content: center;
- width: var(--sds-size-base-m);
- height: var(--sds-size-base-m);
+ width: var(--sds-fontsize-base-m);
+ height: var(--sds-fontsize-base-m);
}
&:focus-visible {
- outline: 4px dashed var(--sds-color-base-bla-01);
+ outline: var(--sds-size-base-xxs) dashed var(--sds-color-base-bla-01);
}
&--primary {
@@ -86,7 +86,7 @@
background-color: var(--sds-color-base-background-dark);
border-radius: 50%;
color: var(--sds-color-typography-light-primary);
- font-size: var(--sds-size-base-s2);
+ font-size: var(--sds-fontsize-base-s2);
}
}
diff --git a/packages/core/custom-properties.pcss b/packages/core/custom-properties.pcss
index d127dd2e3..1e8a5326b 100644
--- a/packages/core/custom-properties.pcss
+++ b/packages/core/custom-properties.pcss
@@ -1,7 +1,2 @@
@import url("./dist/tokens/css/custom-media.css");
@import url("./dist/tokens/css/tokens.css");
-
-:root {
- --sds-fontsize-mod-l: 0.875;
- --sds-fontsize-mod-m: 0.75;
-}
diff --git a/packages/core/index.pcss b/packages/core/index.pcss
index 4b162c55c..e5122a9e3 100644
--- a/packages/core/index.pcss
+++ b/packages/core/index.pcss
@@ -14,10 +14,10 @@
:root {
color: var(--sds-color-typography-dark-primary);
font-family: Haffer, Arial, sans-serif;
- font-size: var(--sds-size-base-s1);
+ font-size: var(--sds-fontsize-base-s1);
font-style: normal;
font-weight: 400;
- line-height: var(--sds-size-base-m);
+ line-height: var(--sds-fontsize-base-m);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
diff --git a/packages/core/stories/Spacing.stories.mdx b/packages/core/stories/Spacing.stories.mdx
index 2e1c62203..7e342a1e8 100644
--- a/packages/core/stories/Spacing.stories.mdx
+++ b/packages/core/stories/Spacing.stories.mdx
@@ -40,15 +40,16 @@ import * as tokens from "../../core/dist/tokens/js/tokens.js";
return (
<>
<div>
- <div
- style={{ fontSize: "14px", fontWeight: "700", color: "#333333" }}
- >
+ <div style={{ fontSize: "14px", fontWeight: "700", color: "#333" }}>
{token[0]}
</div>
<div style={{ color: "rgba(51,51,51,0.8)", fontSize: "14px" }}>
{token[1].attributes.category}.{token[1].attributes.type}.
{token[1].attributes.item}
</div>
+ <div style={{ color: "rgba(51,51,51,0.8)", fontSize: "14px" }}>
+ {token[1].value}
+ </div>
</div>
<div>
<div
diff --git a/packages/core/tokens/size.json b/packages/core/tokens/size.json
index 136de0d2e..6caefec5c 100644
--- a/packages/core/tokens/size.json
+++ b/packages/core/tokens/size.json
@@ -1,5 +1,60 @@
{
"size": {
+ "base": {
+ "xxs": {
+ "value": "4px"
+ },
+ "xxs1": {
+ "value": "6px"
+ },
+ "xs": {
+ "value": "8px"
+ },
+ "xs1": {
+ "value": "10px"
+ },
+ "s": {
+ "value": "12px"
+ },
+ "s1": {
+ "value": "16px"
+ },
+ "s2": {
+ "value": "20px"
+ },
+ "m": {
+ "value": "24px"
+ },
+ "m1": {
+ "value": "32px"
+ },
+ "m2": {
+ "value": "40px"
+ },
+ "l": {
+ "value": "48px"
+ },
+ "l1": {
+ "value": "64px"
+ },
+ "l2": {
+ "value": "80px"
+ },
+ "xl": {
+ "value": "96px"
+ },
+ "xl1": {
+ "value": "128px"
+ },
+ "xl2": {
+ "value": "160px"
+ },
+ "xxl": {
+ "value": "192px"
+ }
+ }
+ },
+ "fontsize": {
"base": {
"xxs": {
"value": "calc(4rem / 16)"
@@ -52,6 +107,14 @@
"xxl": {
"value": "calc(192rem / 16)"
}
+ },
+ "mod": {
+ "m": {
+ "value": "0.75"
+ },
+ "l": {
+ "value": "0.875"
+ }
}
}
}
diff --git a/packages/core/tokens/zindex.json b/packages/core/tokens/zindex.json
new file mode 100644
index 000000000..8ea4cf8d6
--- /dev/null
+++ b/packages/core/tokens/zindex.json
@@ -0,0 +1,7 @@
+{
+ "zindex": {
+ "default": {
+ "value": "auto"
+ }
+ }
+}
diff --git a/packages/core/typography.pcss b/packages/core/typography.pcss
index a845ba0aa..3cb520de9 100644
--- a/packages/core/typography.pcss
+++ b/packages/core/typography.pcss
@@ -1,114 +1,130 @@
.sds-typography {
&-body {
&--normal {
- font-size: var(--sds-size-base-s1);
- line-height: var(--sds-size-base-m);
+ font-size: var(--sds-fontsize-base-s1);
+ line-height: var(--sds-fontsize-base-m);
}
&--lead {
- font-size: var(--sds-size-base-s2);
- line-height: var(--sds-size-base-m1);
+ font-size: var(--sds-fontsize-base-s2);
+ line-height: var(--sds-fontsize-base-m1);
@media (--sds-breakpoint-desktop) {
- font-size: var(--sds-size-base-s2);
- line-height: var(--sds-size-base-m);
+ font-size: var(--sds-fontsize-base-s2);
+ line-height: var(--sds-fontsize-base-m);
}
@media (--sds-breakpoint-ultrawide) {
- font-size: var(--sds-size-base-m1);
- line-height: var(--sds-size-base-m1);
+ font-size: var(--sds-fontsize-base-m1);
+ line-height: var(--sds-fontsize-base-m1);
}
}
&--caption {
- font-size: var(--sds-size-base-s2);
- line-height: var(--sds-size-base-s1);
+ font-size: var(--sds-fontsize-base-s2);
+ line-height: var(--sds-fontsize-base-s1);
}
}
&-heading {
&--page {
- font-size: calc(var(--sds-size-base-l) * var(--sds-fontsize-mod-m));
+ font-size: calc(var(--sds-fontsize-base-l) * var(--sds-fontsize-mod-m));
font-weight: 700;
- line-height: var(--sds-size-base-l);
+ line-height: var(--sds-fontsize-base-l);
@media (--sds-breakpoint-tablet) {
- font-size: calc(var(--sds-size-base-l1) * var(--sds-fontsize-mod-l));
- line-height: var(--sds-size-base-l1);
+ font-size: calc(
+ var(--sds-fontsize-base-l1) * var(--sds-fontsize-mod-l)
+ );
+ line-height: var(--sds-fontsize-base-l1);
}
@media (--sds-breakpoint-desktop) {
- font-size: calc(var(--sds-size-base-l2) * var(--sds-fontsize-mod-l));
- line-height: var(--sds-size-base-l2);
+ font-size: calc(
+ var(--sds-fontsize-base-l2) * var(--sds-fontsize-mod-l)
+ );
+ line-height: var(--sds-fontsize-base-l2);
}
@media (--sds-breakpoint-ultrawide) {
- font-size: calc(var(--sds-size-base-xl) * var(--sds-fontsize-mod-l));
- line-height: var(--sds-size-base-xl);
+ font-size: calc(
+ var(--sds-fontsize-base-xl) * var(--sds-fontsize-mod-l)
+ );
+ line-height: var(--sds-fontsize-base-xl);
}
}
&--section {
- font-size: calc(var(--sds-size-base-m2) * var(--sds-fontsize-mod-l));
+ font-size: calc(var(--sds-fontsize-base-m2) * var(--sds-fontsize-mod-l));
font-weight: 400;
- line-height: var(--sds-size-base-m2);
+ line-height: var(--sds-fontsize-base-m2);
@media (--sds-breakpoint-tablet) {
- font-size: calc(var(--sds-size-base-l) * var(--sds-fontsize-mod-m));
- line-height: var(--sds-size-base-l);
+ font-size: calc(var(--sds-fontsize-base-l) * var(--sds-fontsize-mod-m));
+ line-height: var(--sds-fontsize-base-l);
}
@media (--sds-breakpoint-desktop) {
- font-size: calc(var(--sds-size-base-l1) * var(--sds-fontsize-mod-m));
- line-height: var(--sds-size-base-l1);
+ font-size: calc(
+ var(--sds-fontsize-base-l1) * var(--sds-fontsize-mod-m)
+ );
+ line-height: var(--sds-fontsize-base-l1);
}
@media (--sds-breakpoint-ultrawide) {
- font-size: calc(var(--sds-size-base-l2) * var(--sds-fontsize-mod-l));
- line-height: var(--sds-size-base-l2);
+ font-size: calc(
+ var(--sds-fontsize-base-l2) * var(--sds-fontsize-mod-l)
+ );
+ line-height: var(--sds-fontsize-base-l2);
}
}
&--component {
- font-size: calc(var(--sds-size-base-m1) * var(--sds-fontsize-mod-m));
+ font-size: calc(var(--sds-fontsize-base-m1) * var(--sds-fontsize-mod-m));
font-weight: 400;
- line-height: var(--sds-size-base-m1);
+ line-height: var(--sds-fontsize-base-m1);
@media (--sds-breakpoint-tablet) {
- font-size: calc(var(--sds-size-base-m2) * var(--sds-fontsize-mod-m));
- line-height: var(--sds-size-base-m2);
+ font-size: calc(
+ var(--sds-fontsize-base-m2) * var(--sds-fontsize-mod-m)
+ );
+ line-height: var(--sds-fontsize-base-m2);
}
@media (--sds-breakpoint-desktop) {
- font-size: calc(var(--sds-size-base-l) * var(--sds-fontsize-mod-m));
- line-height: var(--sds-size-base-l);
+ font-size: calc(var(--sds-fontsize-base-l) * var(--sds-fontsize-mod-m));
+ line-height: var(--sds-fontsize-base-l);
}
}
&--group {
- font-size: calc(var(--sds-size-base-m) * var(--sds-fontsize-mod-m));
+ font-size: calc(var(--sds-fontsize-base-m) * var(--sds-fontsize-mod-m));
font-weight: 400;
- line-height: var(--sds-size-base-m);
+ line-height: var(--sds-fontsize-base-m);
@media (--sds-breakpoint-tablet) {
- font-size: calc(var(--sds-size-base-m1) * var(--sds-fontsize-mod-m));
- line-height: var(--sds-size-base-m1);
+ font-size: calc(
+ var(--sds-fontsize-base-m1) * var(--sds-fontsize-mod-m)
+ );
+ line-height: var(--sds-fontsize-base-m1);
}
@media (--sds-breakpoint-desktop) {
- font-size: calc(var(--sds-size-base-m2) * var(--sds-fontsize-mod-m));
- line-height: var(--sds-size-base-m2);
+ font-size: calc(
+ var(--sds-fontsize-base-m2) * var(--sds-fontsize-mod-m)
+ );
+ line-height: var(--sds-fontsize-base-m2);
}
}
&--paragraph {
- font-size: calc(var(--sds-size-base-s2) * var(--sds-fontsize-mod-m));
+ font-size: calc(var(--sds-fontsize-base-s2) * var(--sds-fontsize-mod-m));
font-weight: 700;
- line-height: var(--sds-size-base-s2);
+ line-height: var(--sds-fontsize-base-s2);
@media (--sds-breakpoint-tablet) {
- font-size: calc(var(--sds-size-base-m) * var(--sds-fontsize-mod-m));
- line-height: var(--sds-size-base-m);
+ font-size: calc(var(--sds-fontsize-base-m) * var(--sds-fontsize-mod-m));
+ line-height: var(--sds-fontsize-base-m);
}
}
&--overline {
- font-size: calc(var(--sds-size-base-s1) * var(--sds-fontsize-mod-m));
+ font-size: calc(var(--sds-fontsize-base-s1) * var(--sds-fontsize-mod-m));
font-weight: 700;
- line-height: var(--sds-size-base-s1);
+ line-height: var(--sds-fontsize-base-s1);
text-transform: uppercase;
}
}
@@ -126,16 +142,16 @@
}
&-blockquote {
- font-size: calc(var(--sds-size-base-m1) * var(--sds-fontsize-mod-m));
+ font-size: calc(var(--sds-fontsize-base-m1) * var(--sds-fontsize-mod-m));
font-weight: 400;
- line-height: var(--sds-size-base-m1);
+ line-height: var(--sds-fontsize-base-m1);
margin: 0;
padding-left: 48px;
position: relative;
&::before {
content: open-quote;
- font-size: var(--sds-size-base-xl);
+ font-size: var(--sds-fontsize-base-xl);
position: absolute;
top: calc(50% + 10px);
margin-left: -48px;
@@ -174,7 +190,7 @@
&[target="_blank"],
&--external {
- padding-right: var(--sds-size-base-m);
+ padding-right: var(--sds-fontsize-base-m);
position: relative;
&::after {
@@ -183,18 +199,18 @@
display: block;
mask-position: center right;
mask-repeat: no-repeat;
- mask-size: var(--sds-size-base-s2);
+ mask-size: var(--sds-fontsize-base-s2);
position: absolute;
bottom: 0;
right: 0;
- width: var(--sds-size-base-s2);
- height: var(--sds-size-base-s2);
+ width: var(--sds-fontsize-base-s2);
+ height: var(--sds-fontsize-base-s2);
}
}
&[href^="mailto:"],
&[href^="tel:"] {
- padding-left: var(--sds-size-base-m);
+ padding-left: var(--sds-fontsize-base-m);
position: relative;
&::before {
@@ -202,12 +218,12 @@
display: block;
mask-position: center left;
mask-repeat: no-repeat;
- mask-size: var(--sds-size-base-s2);
+ mask-size: var(--sds-fontsize-base-s2);
position: absolute;
top: 0;
left: 0;
- width: var(--sds-size-base-s2);
- height: var(--sds-size-base-s2);
+ width: var(--sds-fontsize-base-s2);
+ height: var(--sds-fontsize-base-s2);
}
}
@@ -240,7 +256,7 @@
padding: 0 4px;
position: absolute;
left: -2px;
- bottom: calc(calc(var(--sds-size-base-m) * -1) - 2px);
+ bottom: calc(calc(var(--sds-fontsize-base-m) * -1) - 2px);
text-decoration: none;
white-space: nowrap;
width: auto;
diff --git a/packages/pagination/pagination.pcss b/packages/pagination/pagination.pcss
index 8690383f4..8c394bf56 100644
--- a/packages/pagination/pagination.pcss
+++ b/packages/pagination/pagination.pcss
@@ -7,7 +7,7 @@
align-items: center;
display: inline-flex;
justify-content: center;
- margin-right: 12px;
+ margin-right: var(--sds-size-base-s);
&:last-of-type {
margin-right: 0;
@@ -23,11 +23,11 @@
border-radius: 50%;
color: var(--sds-color-base-background-dark);
cursor: pointer;
- font-size: var(--sds-size-base-s2);
- line-height: var(--sds-size-base-m);
+ font-size: var(--sds-fontsize-base-s2);
+ line-height: var(--sds-fontsize-base-m);
text-align: center;
- width: var(--sds-size-base-l);
- height: var(--sds-size-base-l);
+ width: var(--sds-fontsize-base-l);
+ height: var(--sds-fontsize-base-l);
padding: 0;
&:hover,
@@ -37,7 +37,7 @@
&:focus-visible {
border-color: transparent;
- outline: 4px dashed var(--sds-color-base-bla-01);
+ outline: var(--sds-size-base-xxs) dashed var(--sds-color-base-bla-01);
}
&:active {
--
GitLab