Skip to content

Commit

Permalink
tmp
Browse files Browse the repository at this point in the history
  • Loading branch information
@louismaximepiton
louismaximepiton committed Oct 30, 2024
1 parent 5671e80 commit 0af2153
Show file tree
Hide file tree
Showing 27 changed files with 1,648 additions and 405 deletions.
181 changes: 181 additions & 0 deletions scss/_maps.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,187 @@ $ouds-elevations: (
) !default;
// scss-docs-end ouds-maps-elevations

// scss-docs-start ouds-maps-font-placeholders
%display-large {
max-width: var(--#{$prefix}font-max-width-display-large);
font-size: var(--#{$prefix}font-size-display-large);
line-height: var(--#{$prefix}font-line-height-display-large);

/* rtl:remove */
letter-spacing: var(--#{$prefix}font-letter-spacing-display-large);
}

%display-medium {
max-width: var(--#{$prefix}font-max-width-display-medium);
font-size: var(--#{$prefix}font-size-display-medium);
line-height: var(--#{$prefix}font-line-height-display-medium);

/* rtl:remove */
letter-spacing: var(--#{$prefix}font-letter-spacing-display-medium);
}

%display-small {
max-width: var(--#{$prefix}font-max-width-display-small);
font-size: var(--#{$prefix}font-size-display-small);
line-height: var(--#{$prefix}font-line-height-display-small);

/* rtl:remove */
letter-spacing: var(--#{$prefix}font-letter-spacing-display-small);
}

%heading-xlarge {
max-width: var(--#{$prefix}font-max-width-heading-xlarge);
font-size: var(--#{$prefix}font-size-heading-xlarge);
line-height: var(--#{$prefix}font-line-height-heading-xlarge);

/* rtl:remove */
letter-spacing: var(--#{$prefix}font-letter-spacing-heading-xlarge);
}

%heading-large {
max-width: var(--#{$prefix}font-max-width-heading-large);
font-size: var(--#{$prefix}font-size-heading-large);
line-height: var(--#{$prefix}font-line-height-heading-large);

/* rtl:remove */
letter-spacing: var(--#{$prefix}font-letter-spacing-heading-large);
}

%heading-medium {
max-width: var(--#{$prefix}font-max-width-heading-medium);
font-size: var(--#{$prefix}font-size-heading-medium);
line-height: var(--#{$prefix}font-line-height-heading-medium);

/* rtl:remove */
letter-spacing: var(--#{$prefix}font-letter-spacing-heading-medium);
}

%heading-small {
max-width: var(--#{$prefix}font-max-width-heading-small);
font-size: var(--#{$prefix}font-size-heading-small);
line-height: var(--#{$prefix}font-line-height-heading-small);

/* rtl:remove */
letter-spacing: var(--#{$prefix}font-letter-spacing-heading-small);
}

%heading-xsmall {
max-width: var(--#{$prefix}font-max-width-heading-xsmall);
font-size: var(--#{$prefix}font-size-heading-xsmall);
line-height: var(--#{$prefix}font-line-height-heading-xsmall);

/* rtl:remove */
letter-spacing: var(--#{$prefix}font-letter-spacing-heading-xsmall);
}

%body-large {
max-width: var(--#{$prefix}font-max-width-body-large);
font-size: var(--#{$prefix}font-size-body-large);
line-height: var(--#{$prefix}font-line-height-body-large);

/* rtl:remove */
letter-spacing: var(--#{$prefix}font-letter-spacing-body-large);
}

%body-medium {
max-width: var(--#{$prefix}font-max-width-body-medium);
font-size: var(--#{$prefix}font-size-body-medium);
line-height: var(--#{$prefix}font-line-height-body-medium);

/* rtl:remove */
letter-spacing: var(--#{$prefix}font-letter-spacing-body-medium);
}

%body-small {
max-width: var(--#{$prefix}font-max-width-body-small);
font-size: var(--#{$prefix}font-size-body-small);
line-height: var(--#{$prefix}font-line-height-body-small);

/* rtl:remove */
letter-spacing: var(--#{$prefix}font-letter-spacing-body-small);
}

%label-xlarge {
font-size: px-to-rem($ouds-font-size-label-xlarge);
line-height: divide($ouds-font-line-height-label-xlarge, $ouds-font-size-label-xlarge);

/* rtl:remove */
letter-spacing: px-to-rem($ouds-font-letter-spacing-label-xlarge);
}

%label-large {
font-size: px-to-rem($ouds-font-size-label-large);
line-height: divide($ouds-font-line-height-label-large, $ouds-font-size-label-large);

/* rtl:remove */
letter-spacing: px-to-rem($ouds-font-letter-spacing-label-large);
}

%label-medium {
font-size: px-to-rem($ouds-font-size-label-medium);
line-height: divide($ouds-font-line-height-label-medium, $ouds-font-size-label-medium);

/* rtl:remove */
letter-spacing: px-to-rem($ouds-font-letter-spacing-label-medium);
}

%label-small {
font-size: px-to-rem($ouds-font-size-label-small);
line-height: divide($ouds-font-line-height-label-small, $ouds-font-size-label-small);

/* rtl:remove */
letter-spacing: px-to-rem($ouds-font-letter-spacing-label-small);
}

%code-medium {
font-size: px-to-rem($ouds-font-size-code-medium);
line-height: divide($ouds-font-line-height-code-medium, $ouds-font-size-code-medium);

/* rtl:remove */
letter-spacing: px-to-rem($ouds-font-letter-spacing-code-medium);
}

%code-small {
font-size: px-to-rem($ouds-font-size-code-small);
line-height: divide($ouds-font-line-height-code-small, $ouds-font-size-code-small);

/* rtl:remove */
letter-spacing: px-to-rem($ouds-font-letter-spacing-code-small);
}
// scss-docs-end ouds-maps-font-placeholders

// scss-docs-start ouds-maps-fonts
$ouds-font-sizes: (
dl: "%display-large",
dm: "%display-medium",
ds: "%display-small",
hxl: "%heading-xlarge",
hl: "%heading-large",
hm: "%heading-medium",
hs: "%heading-small",
hxs: "%heading-xsmall",
bl: "%body-large",
bm: "%body-medium",
bs: "%body-small",
lxl: "%label-xlarge",
ll: "%label-large",
lm: "%label-medium",
ls: "%label-small",
cm: "%code-medium",
cs: "%code-small"
) !default;

$ouds-font-weights: (
normal: $ouds-font-weight-web-default,
bold: $ouds-font-weight-web-strong
) !default;

$ouds-line-lengths: (
sm: 40ch,
md: 80ch
) !default;
// scss-docs-end ouds-maps-fonts

// scss-docs-start ouds-maps-opacities
$ouds-opacities: (
"transparent": $ouds-opacity-transparent,
Expand Down
65 changes: 32 additions & 33 deletions scss/_reboot.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@
// 2. As a best practice, apply a default `background-color`.
// 3. Prevent adjustments of font size after orientation changes in iOS.
// 4. Change the default tap highlight to be completely transparent in iOS.
// 5. Prevent faux-bold/italic
// 5. Prevent faux-bold/italic maybe for some RTL fonts
// See https://developer.mozilla.org/fr/docs/Web/CSS/font-synthesis

// scss-docs-start reboot-body-rules
Expand All @@ -69,11 +69,11 @@ body {
@include font-size(var(--#{$prefix}body-font-size));
font-weight: var(--#{$prefix}body-font-weight);
line-height: var(--#{$prefix}body-line-height);
// OUDS mod: no color
color: var(--#{$prefix}body-color);
text-align: var(--#{$prefix}body-text-align);

/* rtl:remove */
letter-spacing: $letter-spacing-base; // OUDS mod
letter-spacing: var(--#{$prefix}body-letter-spacing); // OUDS mod
background-color: var(--#{$prefix}body-bg); // 2
-webkit-text-size-adjust: 100%; // 3
-webkit-tap-highlight-color: rgba($black, 0); // 4
Expand Down Expand Up @@ -134,43 +134,46 @@ hr {
%heading {
margin-top: 0; // 1
margin-bottom: $headings-margin-bottom;
@include font-size($font-size-base); // OUDS mod
font-family: $headings-font-family;
font-style: $headings-font-style;
font-weight: $headings-font-weight;
line-height: $headings-line-height;
color: var(--#{$prefix}heading-color);

/* rtl:remove */
letter-spacing: $letter-spacing-base; // OUDS mod
-webkit-font-smoothing: antialiased; // OUDS mod
-moz-osx-font-smoothing: grayscale; // OUDS mod
text-rendering: optimizelegibility; // OUDS mod
}

h1 {
@extend %heading;
@include font-size($h4-font-size);
line-height: $h4-line-height;
@extend %heading-xlarge; // OUDS mod: instead of `@include font-size($h1-font-size)`
}

/* rtl:remove */
letter-spacing: $h4-spacing;
h2 {
@extend %heading;
@extend %heading-large; // OUDS mod: instead of `@include font-size($h2-font-size)`
}

h2,
h3 {
@extend %heading;
@include font-size($h5-font-size);
line-height: $h5-line-height;
@extend %heading-medium; // OUDS mod: instead of `@include font-size($h3-font-size)`
}

/* rtl:remove */
letter-spacing: $h5-spacing;
h4 {
@extend %heading;
@extend %heading-small; // OUDS mod: instead of `@include font-size($h4-font-size)`
}

h5 {
@extend %heading;
@extend %heading-xsmall; // OUDS mod: instead of `@include font-size($h5-font-size)`
}

h4,
h5,
h6 {
@extend %heading;
@extend %body-large; // OUDS mod: instead of `@include font-size($h6-font-size)` // Makes sense for me to have the smallest title the same font-size as the largest body since it's Bold and spaced correctly
}


Expand Down Expand Up @@ -286,6 +289,13 @@ blockquote {
margin: 0 0 1rem;
}

// OUDS mod: No italic
em,
cite {
font-style: normal; // OUDS mod: remove italic.
}
// End mod


// Strong
//
Expand All @@ -304,10 +314,6 @@ strong {

small {
@include font-size($small-font-size);
// OUDS mod
font-weight: $font-weight-normal;
line-height: $line-height-sm;
// End mod
}


Expand Down Expand Up @@ -383,8 +389,7 @@ pre {
margin-top: 0; // 1
margin-bottom: 1rem; // 2
overflow: auto; // 3
@include font-size($code-font-size);
line-height: $pre-line-height; // OUDS mod
@extend %code-small; // OUDS mod: instead of `@include font-size($code-font-size)`
color: $pre-color;

// Account for some code outputs that place code tags in pre tags
Expand All @@ -399,7 +404,6 @@ var, // OUDS mod
code {
@include font-size($code-font-size);
font-style: normal; // OUDS mod: <var> is italic in all browsers
line-height: $line-height-sm; // OUDS mod
color: var(--#{$prefix}code-color);
word-wrap: break-word;

Expand All @@ -409,9 +413,9 @@ code {
}
}

kbd {
kbd { // TODO LM: Check the rendering
padding: $kbd-padding-y $kbd-padding-x;
@include font-size($kbd-font-size);
@extend %code-small; // OUDS mod: instead of `@include font-size($code-font-size)`
color: $kbd-color;
background-color: $kbd-bg;
@include border-radius($border-radius-sm);
Expand Down Expand Up @@ -460,13 +464,10 @@ table {
caption {
padding-top: $table-caption-padding-y;
padding-bottom: $table-caption-padding-y;
@include font-size($h1-font-size); // OUDS mod
font-weight: $font-weight-bold; // OUDS mod
@extend %heading-xlarge; // OUDS mod
font-weight: $font-weight-bold; // OUDS mod
color: $table-caption-color;
text-align: left;

/* rtl:remove */
letter-spacing: $h1-spacing; // OUDS mod
-webkit-font-smoothing: antialiased; // OUDS mod
-moz-osx-font-smoothing: grayscale; // OUDS mod
text-rendering: optimizelegibility; // OUDS mod
Expand Down Expand Up @@ -500,7 +501,6 @@ th {

label {
display: inline-block; // 1
font-weight: $form-label-font-weight; // OUDS mod
}

// Remove the default `border-radius` that macOS Chrome adds.
Expand Down Expand Up @@ -626,9 +626,8 @@ legend {
width: 100%;
padding: 0;
margin-bottom: $legend-margin-bottom;
@include font-size($legend-font-size);
@extend %body-large; // OUDS mod: instead of `@include font-size($legend-font-size)`
font-weight: $legend-font-weight;
line-height: inherit;

+ * {
clear: left; // 2
Expand Down
Loading

0 comments on commit 0af2153

Please sign in to comment.