Skip to content

Commit 46fd4d5

Browse files
th-94th-94
authored
Th/add responsive css variables [run-chromatic] (#510)
2 parents 019a1c9 + 3f874bc commit 46fd4d5

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+614
-188
lines changed

‎.storybook/global.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ sgds-faq-grid {
5151
margin: calc(var(--sgds-margin-xs) * -1);
5252
}
5353
ul.toc-list > * {
54-
font-size: var(--sgds-font-size-1);
54+
font-size: var(--sgds-font-size-14);
5555
}
5656
.grid-item {
5757
background-color: var(--sgds-product-primary-600);

‎.storybook/main.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import remarkGfm from "remark-gfm";
22
module.exports = {
33
stories: [
4-
"../stories/style/**/*.@(mdx|stories.@(js|jsx|ts|tsx))",
4+
"../stories/foundation/**/*.@(mdx|stories.@(js|jsx|ts|tsx))",
55
"../stories/usage/**/*.@(mdx|stories.@(js|jsx|ts|tsx))",
66
"../stories/migration/**/*.@(mdx|stories.@(js|jsx|ts|tsx))",
77
"../stories/frameworks/**/*.@(mdx|stories.@(js|jsx|ts|tsx))",

‎.storybook/preview.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,8 @@ export const parameters = {
6767
"Usage",
6868
"Frameworks",
6969
["Angular", "Vue", "React", "NextJS"],
70-
"Style",
70+
"Foundation",
71+
["Introduction", "Typography and Layout", "Grid System", "Theming"],
7172
"Form",
7273
["Validation", "Custom Validation"],
7374
"Troubleshoot",

docs/FoundationalStyles.md renamed to docs/FoundationIntroduction.md

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# Foundation
1+
# Introduction
22

33
The library also provides styles for SGDS foundation to help users style your application wholistically with SGDS.
44
The styles help to override the default browser's native styles with SGDS.
@@ -18,6 +18,23 @@ Foundation aspects of SGDS includes:
1818
- list `<ol>, <ul>, <li>`
1919
- [grid system](?path=/docs/style-grid-system--docs)
2020

21+
## Font Import
22+
23+
SGDS foundation styles use the **Inter** typeface for typography. Import the Inter Google Font in your HTML `<head>` to ensure all foundation elements (headings, paragraphs, labels, etc.) display correctly.
24+
25+
<strong>HTML</strong>
26+
27+
```html
28+
<link rel="preconnect" href="https://fonts.googleapis.com" />
29+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
30+
<link
31+
href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
32+
rel="stylesheet"
33+
/>
34+
```
35+
36+
Add this in the `<head>` section of your HTML document before importing SGDS styles. The font-display swap parameter ensures text remains visible while the font loads.
37+
2138
## Import
2239

2340
The CSS styles are dependent on the css variable tokens. Import the `themes/day.css` file first before importing the css files. If you required night mode, import `themes/night.css` as well.

‎src/base/button.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -114,22 +114,22 @@
114114
}
115115

116116
:host([size="lg"]) .btn {
117-
font-size: var(--sgds-font-size-3);
117+
font-size: var(--sgds-font-size-20);
118118
line-height: var(--sgds-line-height-32);
119119
padding: var(--sgds-padding-none) var(--sgds-padding-xl);
120120
min-width: var(--sgds-dimension-112);
121121
height: var(--sgds-dimension-56);
122122
}
123123

124124
:host([size="sm"]) .btn {
125-
font-size: var(--sgds-font-size-1);
125+
font-size: var(--sgds-font-size-14);
126126
line-height: var(--sgds-line-height-20);
127127
padding: var(--sgds-padding-none) var(--sgds-padding-md);
128128
min-width: var(--sgds-dimension-80);
129129
height: var(--sgds-dimension-40);
130130
}
131131
:host([size="xs"]) .btn {
132-
font-size: var(--sgds-font-size-0);
132+
font-size: var(--sgds-font-size-12);
133133
line-height: var(--sgds-line-height-16);
134134
padding: var(--sgds-padding-none) var(--sgds-padding-sm);
135135
min-width: var(--sgds-dimension-64);
@@ -146,7 +146,7 @@
146146
align-items: center;
147147
justify-content: center;
148148
gap: var(--sgds-gap-2-xs);
149-
font-size: var(--sgds-font-size-2);
149+
font-size: var(--sgds-font-size-16);
150150
font-weight: var(--btn-font-weight);
151151
line-height: var(--sgds-line-height-24);
152152
padding: var(--sgds-padding-none) var(--sgds-padding-lg);

‎src/base/card.css‎

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -162,20 +162,17 @@ a.card:not(.disabled):focus-visible {
162162
gap: var(--sgds-gap-xs);
163163
}
164164

165-
.card-title {
166-
--sgds-font-size-5: var(--sgds-font-size-4);
167-
--sgds-font-size-6: var(--sgds-font-size-4);
168-
--sgds-margin-md: var(--sgds-margin-none);
169-
--sgds-font-weight-bold: var(--sgds-font-weight-semibold);
165+
.card-title,
166+
slot[name="title"]::slotted(*) {
170167
color: var(--sgds-body-color-default);
171-
font-size: var(--sgds-font-size-4);
172-
font-weight: var(--sgds-font-weight-semibold);
173-
margin-bottom: var(--sgds-margin-none);
168+
font-size: var(--sgds-font-size-24) !important;
169+
font-weight: var(--sgds-font-weight-semibold) !important;
170+
margin-bottom: var(--sgds-margin-none) !important;
174171
}
175172

176173
slot[name="subtitle"]::slotted(*) {
177174
color: var(--sgds-color-subtle);
178-
font-size: var(--sgds-font-size-1) !important;
175+
font-size: var(--sgds-font-size-14) !important;
179176
font-weight: var(--sgds-font-weight-semibold) !important;
180177
letter-spacing: var(--sgds-letter-spacing-wide) !important;
181178
text-transform: uppercase;
@@ -184,11 +181,10 @@ slot[name="subtitle"]::slotted(*) {
184181
}
185182

186183
slot[name="title"]::slotted(a) {
187-
--sgds-font-size-2: var(--sgds-font-size-4);
188-
--sgds-font-weight-regular: var(--sgds-font-weight-semibold);
189184
color: var(--sgds-link-color-default);
190-
font-size: var(--sgds-font-size-4);
191-
font-weight: var(--sgds-font-weight-semibold);
185+
font-size: var(--sgds-font-size-24) !important;
186+
font-weight: var(--sgds-font-weight-semibold) !important;
187+
margin-bottom: var(--sgds-margin-none) !important;
192188
text-decoration: none !important;
193189
}
194190

‎src/base/sgds-element.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/Accordion/accordion-item.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
:host([density="compact"]) .accordion-btn {
66
padding: var(--sgds-padding-sm) var(--sgds-padding-sm);
7-
font-size: var(--sgds-font-size-2);
7+
font-size: var(--sgds-font-size-16);
88
line-height: var(--sgds-line-height-20);
99
}
1010

@@ -27,7 +27,7 @@
2727
border: 0;
2828
color: var(--sgds-color-default);
2929
line-height: var(--sgds-line-height-24);
30-
font-size: var(--sgds-font-size-3);
30+
font-size: var(--sgds-font-size-20);
3131
overflow-anchor: none;
3232
}
3333

‎src/components/Badge/badge.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ sgds-tooltip {
9797
color: var(--sgds-color-fixed-light);
9898
border: var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);
9999
border-radius: var(--sgds-border-radius-sm);
100-
font-size: var(--sgds-font-size-1);
100+
font-size: var(--sgds-font-size-14);
101101
height: var(--sgds-dimension-24, 24px);
102102
min-width: var(--sgds-dimension-24);
103103
display: inline-flex;
@@ -136,5 +136,5 @@ sgds-tooltip {
136136

137137
slot::slotted(*) {
138138
font-weight: var(--sgds-font-weight-regular);
139-
font-size: var(--sgds-font-size-1);
139+
font-size: var(--sgds-font-size-14);
140140
}

‎src/components/Checkbox/checkbox-group.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ fieldset {
1919

2020
.label-hint-container .form-label {
2121
color: var(--sgds-form-color-default);
22-
font-size: var(--sgds-font-size-2);
22+
font-size: var(--sgds-font-size-16);
2323
font-weight: var(--sgds-font-weight-regular);
2424
}
2525

0 commit comments

Comments
 (0)