@sage/design-tokens 2.1.0 → 2.4.0

package/css/no-theme.css

@@ -1,267 +0,0 @@
-/*
-Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
- */
-
-/**
- * Do not edit directly
- * Generated on Mon, 14 Mar 2022 10:20:22 GMT
- */
-
-:root {
-  --metaName: No Theme;
-  --metaPublic: true;
-  --colorsLogo: #ef001dff;
-  --colorsTransparent: #00000000;
-  --colorsYin030: #00ac004d;
-  --colorsYin055: #00ac008c;
-  --colorsYin065: #00ac00a6;
-  --colorsYin090: #00ac00e6;
-  --colorsYang100: #ffff00ff;
-  --colorsDisabled400: #ed99f9ff;
-  --colorsDisabled500: #e880f7ff;
-  --colorsDisabled600: #e366f5ff;
-  --colorsReadOnly400: #4da6f4ff;
-  --colorsReadOnly500: #198df1ff;
-  --colorsReadOnly600: #0073d7ff;
-  --colorsComponentsNavigation500: #fcccd2ff;
-  --colorsComponentsNavigation600: #f999a5ff;
-  --colorsComponentsNavigation700: #f56677ff;
-  --colorsComponentsNavigationTransparent: #00000000;
-  --colorsComponentsNavigationYin100: #00ac00ff;
-  --colorsComponentsNavigationYin030: #00ac004d;
-  --colorsComponentsNavigationYin055: #00ac008c;
-  --colorsComponentsNavigationYin065: #00ac00a6;
-  --colorsComponentsNavigationYin090: #00ac00e6;
-  --colorsComponentsNavigationYang100: #ffff00ff;
-  --colorsUtilityMajor100: #94a9ffff;
-  --colorsUtilityMajor150: #7c96ffff;
-  --colorsUtilityMajor200: #6482ffff;
-  --colorsUtilityMajor300: #3a61ffff;
-  --colorsUtilityMajor400: #0031fcff;
-  --colorsUtilityMajor500: #0029d1ff;
-  --colorsUtilityMajor800: #001053ff;
-  --colorsUtilityMajor025: #e5eaffff;
-  --colorsUtilityMajor050: #ced8ffff;
-  --colorsUtilityMajor075: #afbfffff;
-  --colorsUtilityMajorTransparent: #00000000;
-  --colorsUtilityYin030: #00ac004d;
-  --colorsUtilityYin055: #00ac008c;
-  --colorsUtilityYin065: #00ac00a6;
-  --colorsUtilityYin090: #00ac00e6;
-  --colorsUtilityYang100: #ffff00ff;
-  --colorsUtilityDisabled400: #ed99f9ff;
-  --colorsUtilityDisabled500: #e880f7ff;
-  --colorsUtilityDisabled600: #e366f5ff;
-  --colorsUtilityReadOnly400: #4da6f4ff;
-  --colorsUtilityReadOnly500: #198df1ff;
-  --colorsUtilityReadOnly600: #0073d7ff;
-  --colorsActionMajor150: #daccfcff;
-  --colorsActionMajor500: #9166f5ff;
-  --colorsActionMajor600: #6c33f2ff;
-  --colorsActionMajor700: #4700efff;
-  --colorsActionMajorTransparent: #00000000;
-  --colorsActionMajorYin030: #00ac004d;
-  --colorsActionMajorYin055: #00ac008c;
-  --colorsActionMajorYin065: #00ac00a6;
-  --colorsActionMajorYin090: #00ac00e6;
-  --colorsActionMajorYang100: #ffff00ff;
-  --colorsActionMinor100: #ced8ffff;
-  --colorsActionMinor150: #afbfffff;
-  --colorsActionMinor200: #94a9ffff;
-  --colorsActionMinor250: #7c96ffff;
-  --colorsActionMinor300: #6482ffff;
-  --colorsActionMinor400: #3a61ffff;
-  --colorsActionMinor500: #0031fcff;
-  --colorsActionMinor600: #0029d1ff;
-  --colorsActionMinor900: #001053ff;
-  --colorsActionMinor025: #f1f4ffff;
-  --colorsActionMinor050: #e5eaffff;
-  --colorsActionMinorTransparent: #00000000;
-  --colorsActionMinorYin030: #00ac004d;
-  --colorsActionMinorYin055: #00ac008c;
-  --colorsActionMinorYin065: #00ac00a6;
-  --colorsActionMinorYin090: #00ac00e6;
-  --colorsActionMinorYang100: #ffff00ff;
-  --colorsActionDisabled400: #ed99f9ff;
-  --colorsActionDisabled500: #e880f7ff;
-  --colorsActionDisabled600: #e366f5ff;
-  --colorsActionReadOnly400: #4da6f4ff;
-  --colorsActionReadOnly500: #198df1ff;
-  --colorsActionReadOnly600: #0073d7ff;
-  --colorsSemanticNeutral200: #99f0f9ff;
-  --colorsSemanticNeutral500: #00d9efff;
-  --colorsSemanticNeutral600: #00aebfff;
-  --colorsSemanticNeutralTransparent: #00000000;
-  --colorsSemanticNeutralYin030: #00ac004d;
-  --colorsSemanticNeutralYin055: #00ac008c;
-  --colorsSemanticNeutralYin065: #00ac00a6;
-  --colorsSemanticNeutralYin090: #00ac00e6;
-  --colorsSemanticNeutralYang100: #ffff00ff;
-  --colorsSemanticFocus250: #80f7d2ff;
-  --colorsSemanticFocus500: #00efa5ff;
-  --colorsSemanticFocusTransparent: #00000000;
-  --colorsSemanticPositive500: #ffc173ff;
-  --colorsSemanticPositive600: #ffb04bff;
-  --colorsSemanticPositiveTransparent: #00000000;
-  --colorsSemanticPositiveYin030: #00ac004d;
-  --colorsSemanticPositiveYin055: #00ac008c;
-  --colorsSemanticPositiveYin065: #00ac00a6;
-  --colorsSemanticPositiveYin090: #00ac00e6;
-  --colorsSemanticPositiveYang100: #ffff00ff;
-  --colorsSemanticNegative500: #d5ef00ff;
-  --colorsSemanticNegative600: #aabf00ff;
-  --colorsSemanticNegativeTransparent: #00000000;
-  --colorsSemanticNegativeYin030: #00ac004d;
-  --colorsSemanticNegativeYin055: #00ac008c;
-  --colorsSemanticNegativeYin065: #00ac00a6;
-  --colorsSemanticNegativeYin090: #00ac00e6;
-  --colorsSemanticNegativeYang100: #ffff00ff;
-  --colorsSemanticCaution400: #4dcbb9ff;
-  --colorsSemanticCaution500: #01b49bff;
-  --colorsSemanticCaution600: #01907cff;
-  --colorsSemanticCautionTransparent: #00000000;
-  --colorsSemanticCautionYin030: #00ac004d;
-  --colorsSemanticCautionYin055: #00ac008c;
-  --colorsSemanticCautionYin065: #00ac00a6;
-  --colorsSemanticCautionYin090: #00ac00e6;
-  --colorsSemanticCautionYang100: #ffff00ff;
-  --colorsSemanticInfo150: #ffd7c8ff;
-  --colorsSemanticInfo500: #ffaf90ff;
-  --colorsSemanticInfo600: #ff946bff;
-  --colorsSemanticInfoTransparent: #00000000;
-  --colorsSemanticInfoYin030: #00ac004d;
-  --colorsSemanticInfoYin055: #00ac008c;
-  --colorsSemanticInfoYin065: #00ac00a6;
-  --colorsSemanticInfoYin090: #00ac00e6;
-  --colorsSemanticInfoYang100: #ffff00ff;
-  --sizing100: 8px;
-  --sizing125: 10px;
-  --sizing150: 12px;
-  --sizing175: 14px;
-  --sizing200: 16px;
-  --sizing250: 20px;
-  --sizing300: 24px;
-  --sizing350: 28px;
-  --sizing375: 30px;
-  --sizing400: 32px;
-  --sizing500: 40px;
-  --sizing600: 48px;
-  --sizing700: 56px;
-  --sizing800: 64px;
-  --sizing900: 72px;
-  --sizing1000: 80px;
-  --sizing025: 2px;
-  --sizing050: 4px;
-  --sizing075: 6px;
-  --sizingLogowidth: 40px;
-  --sizing010: 1px;
-  --spacing100: 8px;
-  --spacing125: 10px;
-  --spacing150: 12px;
-  --spacing200: 16px;
-  --spacing250: 20px;
-  --spacing300: 24px;
-  --spacing400: 32px;
-  --spacing500: 40px;
-  --spacing600: 48px;
-  --spacing700: 56px;
-  --spacing800: 64px;
-  --spacing900: 72px;
-  --spacing1000: 80px;
-  --spacing000: 0;
-  --spacing025: 2px;
-  --spacing050: 4px;
-  --spacing075: 6px;
-  --borderWidth100: 1px;
-  --borderWidth200: 2px;
-  --borderWidth300: 3px;
-  --borderWidth400: 4px;
-  --borderWidth000: 0px;
-  --fontSizes100: 14px;
-  --fontSizes200: 16px;
-  --fontSizes300: 18px;
-  --fontSizes400: 20px;
-  --fontSizes500: 22px;
-  --fontSizes600: 24px;
-  --fontSizes700: 32px;
-  --fontSizes800: 48px;
-  --fontSizes900: 56px;
-  --fontSizes1000: 64px;
-  --fontSizes010: 10px;
-  --fontSizes025: 12px;
-  --fontSizes050: 13px;
-  --boxShadow100: 0 10px 10px 0 #fb450080;
-  --boxShadow200: 0 20px 40px 0 #95db0080;
-  --boxShadow300: 0 30px 60px 0 #00b3db80;
-  --boxShadow400: 0 50px 80px 0 #6000db80;
-  --fontWeights400: 400;
-  --fontWeights500: 500;
-  --fontWeights700: 700;
-  --lineHeights400: 125%;
-  --lineHeights500: 150%;
-  --fontFamiliesDefault: Pridi;
-  --fontFamiliesIos: San Francisco;
-  --fontFamiliesAndroid: Roboto;
-  --fontFamiliesOther: Open Sans;
-  --borderRadiusCircle: 10%;
-  --typographyButtonLabelS: 700 14px/150% Pridi;
-  --typographyButtonLabelM: 700 14px/150% Pridi;
-  --typographyButtonLabelL: 700 16px/150% Pridi;
-  --typographyDialogTitleXs: 700 20px/125% Pridi;
-  --typographyDialogTitleS: 700 20px/125% Pridi;
-  --typographyDialogTitleMs: 700 20px/125% Pridi;
-  --typographyDialogTitleM: 700 20px/125% Pridi;
-  --typographyDialogTitleMl: 700 20px/125% Pridi;
-  --typographyDialogTitleL: 700 20px/125% Pridi;
-  --typographyDialogTitleXl: 700 20px/125% Pridi;
-  --typographyFlashTextM: 400 14px/150% Pridi;
-  --typographyFlashTextL: 400 16px/150% Pridi;
-  --typographyFormFieldLabelXs: 500 14px/150% Pridi;
-  --typographyFormFieldLabelS: 500 14px/150% Pridi;
-  --typographyFormFieldLabelM: 500 14px/150% Pridi;
-  --typographyFormFieldLabelL: 500 16px/150% Pridi;
-  --typographyFormFieldHintTextXs: 400 14px/150% Pridi;
-  --typographyFormFieldHintTextS: 400 14px/150% Pridi;
-  --typographyFormFieldHintTextM: 400 14px/150% Pridi;
-  --typographyFormFieldHintTextL: 400 16px/150% Pridi;
-  --typographyFormFieldErrorMessageXs: 500 14px/150% Pridi;
-  --typographyFormFieldErrorMessageS: 500 14px/150% Pridi;
-  --typographyFormFieldErrorMessageM: 500 14px/150% Pridi;
-  --typographyFormFieldErrorMessageL: 500 16px/150% Pridi;
-  --typographyFormFieldCautionMessageXs: 400 14px/150% Pridi;
-  --typographyFormFieldCautionMessageS: 400 14px/150% Pridi;
-  --typographyFormFieldCautionMessageM: 400 14px/150% Pridi;
-  --typographyFormFieldCautionMessageL: 400 16px/150% Pridi;
-  --typographyFormFieldInputTextXs: 400 14px/150% Pridi;
-  --typographyFormFieldInputTextS: 400 14px/150% Pridi;
-  --typographyFormFieldInputTextM: 400 14px/150% Pridi;
-  --typographyFormFieldInputTextL: 400 16px/150% Pridi;
-  --typographyFormFieldDropdownOptionsXs: 400 14px/150% Pridi;
-  --typographyFormFieldDropdownOptionsS: 400 14px/150% Pridi;
-  --typographyFormFieldDropdownOptionsM: 400 14px/150% Pridi;
-  --typographyFormFieldDropdownOptionsL: 400 16px/150% Pridi;
-  --typographyFormFieldSecondLabelXs: 500 14px/150% Pridi;
-  --typographyFormFieldSecondLabelS: 500 14px/150% Pridi;
-  --typographyFormFieldSecondLabelM: 500 14px/150% Pridi;
-  --typographyFormFieldSecondLabelL: 500 16px/150% Pridi;
-  --typographyFormFieldCharacterCountXs: 400 14px/150% Pridi;
-  --typographyFormFieldCharacterCountS: 400 14px/150% Pridi;
-  --typographyFormFieldCharacterCountM: 400 14px/150% Pridi;
-  --typographyFormFieldCharacterCountL: 400 14px/150% Pridi;
-  --typographyLinkTextM: 400 14px/150% Pridi;
-  --typographyLinkTextL: 400 16px/150% Pridi;
-  --typographyMessageHeadingM: 700 14px/150% Pridi;
-  --typographyMessageHeadingL: 700 16px/150% Pridi;
-  --typographyMessageTextM: 400 14px/150% Pridi;
-  --typographyMessageTextL: 400 16px/150% Pridi;
-  --typographyPillLabelS: 500 10px/150% Pridi;
-  --typographyPillLabelM: 500 12px/150% Pridi;
-  --typographyPillLabelL: 500 14px/150% Pridi;
-  --typographyPillLabelXl: 500 16px/150% Pridi;
-  --typographySwitchOptionLabelM: 500 12px/150% Pridi;
-  --typographySwitchOptionLabelL: 500 14px/150% Pridi;
-  --typographyTableHeaderTextM: 500 14px/150% Pridi;
-  --typographyTableCellTextM: 400 14px/150% Pridi;
-  --typographyTooltipTextM: 400 14px/150% Pridi;
-  --typographyTooltipTextL: 400 16px/150% Pridi;
-}

package/docs/tokens/figma-only/index.html

@@ -1,394 +0,0 @@
-<!doctype html>
-<html class="no-js" lang="en">
-<head>
-    <meta charset="utf-8">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
-    <meta http-equiv="Pragma" content="no-cache" />
-    <meta http-equiv="Expires" content="0" />
-
-    <title>Sage Design Tokens / figma-only</title>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css?family=Lato:400,500,600" rel="stylesheet">
-    <meta name="description" content="">
-    <style>
-        *, *::before, *::after {
-            box-sizing: border-box;
-        }
-
-        html {
-            font-size: 62.5%;
-        }
-
-        body {
-            font-size: 1.4rem;
-            font-family: 'Lato', Arial, sans-serif;
-            padding: 20px 40px;
-        }
-
-		table {
-			width: 100%;
-		}
-
-		.menu {
-			position: sticky;
-			display: inline-block;
-			vertical-align: top;
-			max-height: 100vh;
-			overflow-y: auto;
-			top: 0;
-			bottom: 0;
-            font-size: 14px;
-		}
-
-        .with-icons:hover .permalink {
-            visibility: visible;
-        }
-
-        .permalink {
-            visibility: hidden;
-            font-size: 80%;
-            line-height: inherit;
-            text-decoration: none;
-            vertical-align: middle;
-        }
-
-        .table__color-preview,
-        .table__spacing-preview,
-        .table__border-width-preview,
-        .table__font-size-preview,
-        .table__sizing-preview,
-        .table__opacity-preview,
-        .table__typography-preview,
-        .table__font-weight-preview,
-        .table__box-shadow-preview,
-        .table__font-family-preview,
-        .table__border-radius-preview {
-            height: 40px;
-            width: 100%;
-        }
-
-        .table__font-size-preview,
-        .table__typography-preview,
-        .table__font-weight-preview,
-        .table__font-family-preview {
-            vertical-align: middle;
-            display: table-cell;
-        }
-
-        .table__box-shadow-preview {
-            height: 50px;
-        }
-
-        .table__spacing-preview {
-            background-color: #626566;
-            height: 10px;
-        }
-
-        .table__border-width-preview {
-            border-style: solid;
-            border-color: #CCD6DB;
-            background-color: #626566;
-        }
-
-        .table__sizing-preview {
-            background-color: #626566;
-        }
-
-        .table__opacity-preview {
-            background-color: #ccc;
-        }
-
-        .table__opacity-preview div {
-            width: 100%;
-            height: 100%;
-            background-color: #fff;
-        }
-
-        .table__border-radius-preview {
-            width: 40px;
-            border-color: #626566;
-            border-width: 3px 3px 0 0;
-            border-style: solid;
-        }
-
-        #main-container {
-            max-width: 1024px;
-            margin: 0 auto;
-        }
-
-        .embedded #main-container {
-            max-width: 100%;
-        }
-
-        #icons-container {
-            display: grid;
-            grid-template-columns: repeat(6, 1fr);
-            grid-gap: 20px;
-        }
-
-        .divider {
-            margin: 20px 0 30px;
-        }
-
-        .grid-item {
-            display: block;
-            text-align: center;
-            position: relative;
-            padding-bottom: 40px;
-            padding-top: 20px;
-            border: 1px solid #dbdbdb;
-        }
-
-        .grid-item .codes {
-            position: absolute;
-            display: flex;
-            justify-content: space-between;
-            padding: 5px 20px;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            border-top: 1px solid rgba(10, 10, 10, .1);
-        }
-
-        .grid-item .codes div {
-            cursor: default;
-            color: rgba(10, 10, 10, .6);
-        }
-
-        .preview {
-            display: block;
-            width: 32px;
-            height: auto;
-        }
-
-        .layout {
-            display: flex;
-        }
-
-        .layout .navigation {
-            flex: 0 0 200px;
-        }
-
-        .layout .content {
-            flex: 1 1 auto;
-        }
-
-        .embedded {
-            padding: 10px;
-        }
-
-        .embedded .hide-on-embedded {
-            display: none;
-        }
-    </style>
-</head>
-<body>
-    <div id="main-container">
-        <div class="layout">
-    <aside class="hide-on-embedded navigation menu py-0">
-        <section class="my-6">
-                <p class="menu-label">
-                    <a href="../base/index.html">
-                        base
-                    </a>
-                </p>
-                <ul class="menu-list">
-                        <li>
-                            <a href="../base/colors/index.html">
-                                colors
-                            </a>
-                        </li>
-                        <li>
-                            <a href="../base/sizing/index.html">
-                                sizing
-                            </a>
-                        </li>
-                        <li>
-                            <a href="../base/spacing/index.html">
-                                spacing
-                            </a>
-                        </li>
-                        <li>
-                            <a href="../base/border-width/index.html">
-                                borderWidth
-                            </a>
-                        </li>
-                        <li>
-                            <a href="../base/font-sizes/index.html">
-                                fontSizes
-                            </a>
-                        </li>
-                        <li>
-                            <a href="../base/box-shadow/index.html">
-                                boxShadow
-                            </a>
-                        </li>
-                        <li>
-                            <a href="../base/font-weights/index.html">
-                                fontWeights
-                            </a>
-                        </li>
-                        <li>
-                            <a href="../base/line-heights/index.html">
-                                lineHeights
-                            </a>
-                        </li>
-                        <li>
-                            <a href="../base/font-families/index.html">
-                                fontFamilies
-                            </a>
-                        </li>
-                        <li>
-                            <a href="../base/border-radius/index.html">
-                                borderRadius
-                            </a>
-                        </li>
-                        <li>
-                            <a href="../base/typography/index.html">
-                                typography
-                            </a>
-                        </li>
-                        <li>
-                            <a href="../base/opacity/index.html">
-                                opacity
-                            </a>
-                        </li>
-                </ul>
-                <p class="menu-label">
-                    <a href="../no-theme/index.html">
-                        no-theme
-                    </a>
-                </p>
-                <ul class="menu-list">
-                        <li>
-                            <a href="../no-theme/colors/index.html">
-                                colors
-                            </a>
-                        </li>
-                        <li>
-                            <a href="../no-theme/sizing/index.html">
-                                sizing
-                            </a>
-                        </li>
-                        <li>
-                            <a href="../no-theme/spacing/index.html">
-                                spacing
-                            </a>
-                        </li>
-                        <li>
-                            <a href="../no-theme/border-width/index.html">
-                                borderWidth
-                            </a>
-                        </li>
-                        <li>
-                            <a href="../no-theme/font-sizes/index.html">
-                                fontSizes
-                            </a>
-                        </li>
-                        <li>
-                            <a href="../no-theme/box-shadow/index.html">
-                                boxShadow
-                            </a>
-                        </li>
-                        <li>
-                            <a href="../no-theme/font-weights/index.html">
-                                fontWeights
-                            </a>
-                        </li>
-                        <li>
-                            <a href="../no-theme/line-heights/index.html">
-                                lineHeights
-                            </a>
-                        </li>
-                        <li>
-                            <a href="../no-theme/font-families/index.html">
-                                fontFamilies
-                            </a>
-                        </li>
-                        <li>
-                            <a href="../no-theme/border-radius/index.html">
-                                borderRadius
-                            </a>
-                        </li>
-                        <li>
-                            <a href="../no-theme/typography/index.html">
-                                typography
-                            </a>
-                        </li>
-                </ul>
-                <p class="menu-label">
-                    <a href="../figma-only/index.html">
-                        figma-only
-                    </a>
-                </p>
-                <ul class="menu-list">
-                        <li>
-                            <a href="../figma-only/sizing/index.html">
-                                sizing
-                            </a>
-                        </li>
-                </ul>
-        </section>
-    </aside>
-    <main class="content">
-        <h1 class="hide-on-embedded">
-            <a href="../index.html">
-                Sage Design Tokens
-            </a>
-            /
-            figma-only
-        </h1>
-            <section class="my-6">
-                <h2 class="hide-on-embedded">sizing</h2>
-                <table class="table is-bordered is-hoverable is-fullwidth">
-                  <colgroup>
-                    <col width="50%">
-                    <col width="25%">
-                    <col width="35%">
-                  </colgroup>
-                  <thead>
-                    <tr>
-                      <th class="has-background-light">Name</th>
-                      <th class="has-background-light">Value</th>
-                      <th class="has-background-light">Preview</th>
-                    </tr>
-                  </thead>
-                        <tr>
-                            <td class="with-icons is-vcentered"
-                                id="figma-only-sizing0Hack"
-                                title="theme: figma-only; category: sizing; variant: 0hack; ">
-                                sizing0Hack
-                                <a href="#figma-only-sizing0Hack"
-                                   title="permalink"
-                                   class="permalink">
-                                    🔗
-                                </a>
-                            </td>
-                            <td class="is-vcentered">
-                                <pre>0.01</pre>
-                            </td>
-                            <td class="is-vcentered">
-                                <div class="table__sizing-preview"
-                             style="width: 0.01; height: 0.01">
-                        </div>
-                        
-                            </td>
-                        </tr>
-                </table>
-            </section>
-    </main>
-</div>
-
-    </div>
-
-    <script>
-        const searchParams  = new URLSearchParams(window.location.search);
-        const embedded = !!searchParams.get('embedded');
-        if(embedded) {
-          document.body.classList.add('embedded')
-        }
-    </script>
-</body>
-</html>