wires/hypnagaga
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

sizing tokens

Browse source
This commit is contained in:
Jon McClure 2023-07-29 20:44:34 +01:00
parent 3b6251c0cc
commit 29a9138322
11 changed files with 468 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
bin/css-to-js/index.js
View file

@ -135,11 +135,13 @@ const sanitize = function sanitize(name) {
.replace(/\*/g, 'all-children')
.replace(/#/g, '$')
.replace(/\s\s+/g, ' ')
.replace(/(\d)\\\/(\d)/g, '$1~$2') // Added for escaped slashes like ".w-1/2"
.replace(/(\d)\\\.(\d)/g, '$1|$2') // Added for escaped dots like ".mb-0\.5"
.replace(/[^a-zA-Z0-9$|]/g, '_')
.replace(/[^a-zA-Z0-9$|~]/g, '_')
.replace(/^_+/g, '')
.replace(/_+$/g, '')
.replace('|', '.');
.replace('|', '.') // Replace placeholder
.replace('~', '/'); // Replace placeholder
};
const fontface = function fontface(rule, result) {

8
src/components/FeaturePhoto/FeaturePhoto.svelte
View file

@ -85,12 +85,12 @@
<figure
bind:this="{container}"
aria-label="media"
class="mt-0 mx-0 mb-6 flex flex-col"
class="mt-0 mx-0 mb-6 flex flex-col relative"
>
{#if !lazy || (intersectable && intersecting)}
<img class="m-0" src="{src}" alt="{altText}" />
{:else}
<div class="placeholder" height="{`${height}px`}"></div>
<div class="placeholder" style="{`height: ${height}px;`}"></div>
{/if}
{#if caption}
<PaddingReset containerIsFluid="{width === 'fluid'}">
@ -100,7 +100,7 @@
</PaddingReset>
{/if}
{#if !altText}
<div class="alt-warning text-xxs py-1 px-2">altText</div>
<div class="alt-warning absolute text-xxs py-1 px-2">altText</div>
{/if}
</figure>
</Block>
@ -108,7 +108,6 @@
<style lang="scss">
figure {
width: 100%;
position: relative;
img {
width: 100%;
@ -122,7 +121,6 @@
div.alt-warning {
background-color: red;
color: white;
position: absolute;
top: 0;
right: 0;
}

76
src/docs/styles/tokens/sizing/main.stories.mdx Normal file
View file

@ -0,0 +1,76 @@
import { Meta } from '@storybook/addon-docs';
import { parameters } from '$docs/utils/docsPage.js';
import CopyTable from '../../../docs-components/CopyTable/Table.jsx';
import { cssStringToTableArray } from '../../../utils/parseCss';
{/* @ts-ignore */}
import height from '$lib/scss/tokens/sizing/\_height.scss?inline';
{/* @ts-ignore */}
import maxHeight from '$lib/scss/tokens/sizing/\_max-height.scss?inline';
{/* @ts-ignore */}
import maxWidth from '$lib/scss/tokens/sizing/\_max-width.scss?inline';
{/* @ts-ignore */}
import minHeight from '$lib/scss/tokens/sizing/\_min-height.scss?inline';
{/* @ts-ignore */}
import minWidth from '$lib/scss/tokens/sizing/\_min-width.scss?inline';
{/* @ts-ignore */}
import width from '$lib/scss/tokens/sizing/\_width.scss?inline';
<Meta title="Styles/Tokens/Sizing" parameters={{ ...parameters }} />
![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
# Sizing tokens
<CopyTable
title="Width"
mdnLink="width"
header={['Class', 'Properties']}
body={cssStringToTableArray(width)}
copyable={[true, false]}
/>
<CopyTable
title="Max-width"
mdnLink="max-width"
header={['Class', 'Properties']}
body={cssStringToTableArray(maxWidth)}
copyable={[true, false]}
/>
<CopyTable
title="Min-width"
mdnLink="min-width"
header={['Class', 'Properties']}
body={cssStringToTableArray(minWidth)}
copyable={[true, false]}
/>
<CopyTable
title="Height"
mdnLink="height"
header={['Class', 'Properties']}
body={cssStringToTableArray(height)}
copyable={[true, false]}
/>
<CopyTable
title="Max-height"
mdnLink="max-height"
header={['Class', 'Properties']}
body={cssStringToTableArray(maxHeight)}
copyable={[true, false]}
/>
<CopyTable
title="Min-height"
mdnLink="min-height"
header={['Class', 'Properties']}
body={cssStringToTableArray(minHeight)}
copyable={[true, false]}
/>

1
src/scss/token-classes.scss
View file

@ -3,5 +3,6 @@
@use 'tokens/borders/main' as *;
@use 'tokens/interactivity/main' as *;
@use 'tokens/layout/main' as *;
@use 'tokens/sizing/main' as *;
@use 'tokens/spacers/main' as *;
@use 'tokens/text/main' as *;

168
src/scss/tokens/sizing/_height.scss Normal file
View file

@ -0,0 +1,168 @@
.h-full {
height: 100%;
}
.h-screen {
height: 100vh;
}
.h-1\/2 {
height: 50%;
}
.h-1\/3 {
height: 33.333333%;
}
.h-2\/3 {
height: 66.666667%;
}
.h-1\/4 {
height: 25%;
}
.h-2\/4 {
height: 50%;
}
.h-3\/4 {
height: 75%;
}
.h-1\/5 {
height: 20%;
}
.h-2\/5 {
height: 40%;
}
.h-3\/5 {
height: 60%;
}
.h-4\/5 {
height: 80%;
}
.h-1\/6 {
height: 16.666667%;
}
.h-2\/6 {
height: 33.333333%;
}
.h-3\/6 {
height: 50%;
}
.h-4\/6 {
height: 66.666667%;
}
.h-5\/6 {
height: 83.333333%;
}
.h-1\/12 {
height: 8.333333%;
}
.h-2\/12 {
height: 16.666667%;
}
.h-3\/12 {
height: 25%;
}
.h-4\/12 {
height: 33.333333%;
}
.h-5\/12 {
height: 41.666667%;
}
.h-6\/12 {
height: 50%;
}
.h-7\/12 {
height: 58.333333%;
}
.h-8\/12 {
height: 66.666667%;
}
.h-9\/12 {
height: 75%;
}
.h-10\/12 {
height: 83.333333%;
}
.h-11\/12 {
height: 91.666667%;
}
.\!h-full {
height: 100% !important;
}
.\!h-screen {
height: 100vh !important;
}
.\!h-1\/2 {
height: 50% !important;
}
.\!h-1\/3 {
height: 33.333333% !important;
}
.\!h-2\/3 {
height: 66.666667% !important;
}
.\!h-1\/4 {
height: 25% !important;
}
.\!h-2\/4 {
height: 50% !important;
}
.\!h-3\/4 {
height: 75% !important;
}
.\!h-1\/5 {
height: 20% !important;
}
.\!h-2\/5 {
height: 40% !important;
}
.\!h-3\/5 {
height: 60% !important;
}
.\!h-4\/5 {
height: 80% !important;
}
.\!h-1\/6 {
height: 16.666667% !important;
}
.\!h-2\/6 {
height: 33.333333% !important;
}
.\!h-3\/6 {
height: 50% !important;
}
.\!h-4\/6 {
height: 66.666667% !important;
}
.\!h-5\/6 {
height: 83.333333% !important;
}
.\!h-1\/12 {
height: 8.333333% !important;
}
.\!h-2\/12 {
height: 16.666667% !important;
}
.\!h-3\/12 {
height: 25% !important;
}
.\!h-4\/12 {
height: 33.333333% !important;
}
.\!h-5\/12 {
height: 41.666667% !important;
}
.\!h-6\/12 {
height: 50% !important;
}
.\!h-7\/12 {
height: 58.333333% !important;
}
.\!h-8\/12 {
height: 66.666667% !important;
}
.\!h-9\/12 {
height: 75% !important;
}
.\!h-10\/12 {
height: 83.333333% !important;
}
.\!h-11\/12 {
height: 91.666667% !important;
}

6
src/scss/tokens/sizing/_main.scss Normal file
View file

@ -0,0 +1,6 @@
@forward 'height';
@forward 'max-height';
@forward 'max-width';
@forward 'min-height';
@forward 'min-width';
@forward 'width';

12
src/scss/tokens/sizing/_max-height.scss Normal file
View file

@ -0,0 +1,12 @@
.max-h-full {
max-height: 100%;
}
.max-h-screen {
max-height: 100vh;
}
.\!max-h-full {
max-height: 100% !important;
}
.\!max-h-screen {
max-height: 100vh !important;
}

12
src/scss/tokens/sizing/_max-width.scss Normal file
View file

@ -0,0 +1,12 @@
.max-w-full {
max-width: 100%;
}
.max-w-screen {
max-width: 100vw;
}
.\!max-w-full {
max-width: 100% !important;
}
.\!max-w-screen {
max-width: 100vw !important;
}

12
src/scss/tokens/sizing/_min-height.scss Normal file
View file

@ -0,0 +1,12 @@
.min-h-full {
min-height: 100%;
}
.min-h-screen {
min-height: 100vh;
}
.\!min-h-full {
min-height: 100% !important;
}
.\!min-h-screen {
min-height: 100vh !important;
}

6
src/scss/tokens/sizing/_min-width.scss Normal file
View file

@ -0,0 +1,6 @@
.min-w-full {
min-width: 100%;
}
.\!min-w-full {
min-width: 100% !important;
}

168
src/scss/tokens/sizing/_width.scss Normal file
View file

@ -0,0 +1,168 @@
.w-full {
width: 100%;
}
.w-screen {
width: 100vw;
}
.w-1\/2 {
width: 50%;
}
.w-1\/3 {
width: 33.333333%;
}
.w-2\/3 {
width: 66.666667%;
}
.w-1\/4 {
width: 25%;
}
.w-2\/4 {
width: 50%;
}
.w-3\/4 {
width: 75%;
}
.w-1\/5 {
width: 20%;
}
.w-2\/5 {
width: 40%;
}
.w-3\/5 {
width: 60%;
}
.w-4\/5 {
width: 80%;
}
.w-1\/6 {
width: 16.666667%;
}
.w-2\/6 {
width: 33.333333%;
}
.w-3\/6 {
width: 50%;
}
.w-4\/6 {
width: 66.666667%;
}
.w-5\/6 {
width: 83.333333%;
}
.w-1\/12 {
width: 8.333333%;
}
.w-2\/12 {
width: 16.666667%;
}
.w-3\/12 {
width: 25%;
}
.w-4\/12 {
width: 33.333333%;
}
.w-5\/12 {
width: 41.666667%;
}
.w-6\/12 {
width: 50%;
}
.w-7\/12 {
width: 58.333333%;
}
.w-8\/12 {
width: 66.666667%;
}
.w-9\/12 {
width: 75%;
}
.w-10\/12 {
width: 83.333333%;
}
.w-11\/12 {
width: 91.666667%;
}
.\!w-full {
width: 100% !important;
}
.\!w-screen {
width: 100vw !important;
}
.\!w-1\/2 {
width: 50% !important;
}
.\!w-1\/3 {
width: 33.333333% !important;
}
.\!w-2\/3 {
width: 66.666667% !important;
}
.\!w-1\/4 {
width: 25% !important;
}
.\!w-2\/4 {
width: 50% !important;
}
.\!w-3\/4 {
width: 75% !important;
}
.\!w-1\/5 {
width: 20% !important;
}
.\!w-2\/5 {
width: 40% !important;
}
.\!w-3\/5 {
width: 60% !important;
}
.\!w-4\/5 {
width: 80% !important;
}
.\!w-1\/6 {
width: 16.666667% !important;
}
.\!w-2\/6 {
width: 33.333333% !important;
}
.\!w-3\/6 {
width: 50% !important;
}
.\!w-4\/6 {
width: 66.666667% !important;
}
.\!w-5\/6 {
width: 83.333333% !important;
}
.\!w-1\/12 {
width: 8.333333% !important;
}
.\!w-2\/12 {
width: 16.666667% !important;
}
.\!w-3\/12 {
width: 25% !important;
}
.\!w-4\/12 {
width: 33.333333% !important;
}
.\!w-5\/12 {
width: 41.666667% !important;
}
.\!w-6\/12 {
width: 50% !important;
}
.\!w-7\/12 {
width: 58.333333% !important;
}
.\!w-8\/12 {
width: 66.666667% !important;
}
.\!w-9\/12 {
width: 75% !important;
}
.\!w-10\/12 {
width: 83.333333% !important;
}
.\!w-11\/12 {
width: 91.666667% !important;
}