@daikin-oss/dds-tokens 0.0.0

package/README.md

@@ -0,0 +1,38 @@
+# dds-tokens
+
+This package outputs:
+
+-   Tokens as both `js` and `css` variables
+-   Brand-specific tokens (i.e. `Daikin` and `AAF`)
+-   `Light` and `Dark` mode
+-   General styles as `variables.(css|js)`
+-   Component-specific styles (i.e. `buttons.css`)
+
+For a complete list of outputs, please check out the file outputs in the `build` folder.
+
+## Usage
+
+```
+npm install @daikin-oss/dds-tokens
+```
+
+Import as js variables:
+
+```
+import {
+    buttonColorBackgroundPrimaryActive
+} from '@daikin-oss/dds-tokens/js/daikin/Light/variables.js';
+```
+
+Import the CSS:
+
+```
+import variables from '@daikin-oss/dds-tokens/css/daikin/Dark/variables.css'
+```
+
+The above includes all CSS classes - including core styles and components
+There are also component-specific files if you don't need everything:
+
+```
+import buttonStyles from '@daikin-oss/dds-tokens/css/daikin/Dark/buttons.css'
+```

package/build/css/AAF/Dark/buttons.css

@@ -0,0 +1,29 @@
+/**
+ * Do not edit directly
+ * Generated on Fri, 31 May 2024 20:50:38 GMT
+ */
+
+:root {
+  --buttonBorderSignInActive: 1px Inside #616161;
+  --buttonBorderSecondaryActive: 1px Solid #DB4F66;
+  --buttonBorderSecondaryHover: 1px Solid #C8102E;
+  --buttonBorderSecondaryPress: 1px Solid #F8AEBA;
+  --buttonBorderSecondaryFocus: 1px Solid #F5C0B8;
+  --buttonBorderSecondaryDisabled: 1px Solid #616161;
+  --buttonColorBackgroundPrimaryActive: #DB4F66; /* Color used for the default state of a secondary button */
+  --buttonColorBackgroundPrimaryHover: #C8102E;
+  --buttonColorBackgroundPrimaryPress: #F8AEBA;
+  --buttonColorBackgroundPrimaryFocus: #F5C0B8;
+  --buttonColorBackgroundPrimaryDisabled: #616161;
+  --buttonColorBorderSecondaryActive: #DB4F66;
+  --buttonColorBorderSecondaryHover: #C8102E;
+  --buttonColorBorderSecondaryPress: #F8AEBA;
+  --buttonColorBorderSecondaryFocus: #F5C0B8;
+  --buttonColorBorderSecondaryDisabled: #616161;
+  --buttonColorTextSecondaryActive: #DB4F66;
+  --buttonColorTextSecondaryHover: #C8102E;
+  --buttonColorTextSecondaryPress: #F8AEBA;
+  --buttonColorTextSecondaryFocus: #F5C0B8;
+  --buttonColorTextSecondaryDisabled: #616161;
+  --buttonColorTextPrimary: #414141;
+}

package/build/css/AAF/Dark/variables.css

@@ -0,0 +1,276 @@
+/**
+ * Do not edit directly
+ * Generated on Fri, 31 May 2024 20:50:38 GMT
+ */
+
+:root {
+  --colorBlue10: #D1F3FF;
+  --colorBlue20: #A6E4FB;
+  --colorBlue30: #7CD5F7;
+  --colorBlue40: #54c3f1;
+  --colorBlue50: #2DB8F0;
+  --colorBlue60: #0097E0;
+  --colorBlue70: #0674C1;
+  --colorBlue80: #0D59A3;
+  --colorBlue90: #114484;
+  --colorBlue100: #143466;
+  --colorBlue110: #132547;
+  --colorBlue120: #0E1629;
+  --colorBlue130: #04060A;
+  --colorGreen10: #F4FFE6;
+  --colorGreen20: #D0F8B9;
+  --colorGreen30: #9FF28F;
+  --colorGreen40: #69EB6E;
+  --colorGreen50: #45E46A;
+  --colorGreen60: #13CE66;
+  --colorGreen70: #04A632;
+  --colorGreen80: #007F0E;
+  --colorGreen90: #055700;
+  --colorGreen100: #0B2F00;
+  --colorGreen110: #030800;
+  --colorYellow10: #FCFFE6;
+  --colorYellow20: #FDFFBB;
+  --colorYellow30: #FFF890;
+  --colorYellow40: #FFE667;
+  --colorYellow50: #FFCC3D;
+  --colorYellow60: #D7B834;
+  --colorYellow70: #AFA02E;
+  --colorYellow80: #878429;
+  --colorYellow90: #5C5F21;
+  --colorYellow100: #333717;
+  --colorYellow110: #0E0F07;
+  --colorOrange10: #FFF4E6;
+  --colorOrange20: #FFE7CD;
+  --colorOrange30: #FFD8B5;
+  --colorOrange40: #FFC69A;
+  --colorOrange50: #FFB27F;
+  --colorOrange60: #F68C54;
+  --colorOrange70: #E86427;
+  --colorOrange80: #B15C20;
+  --colorOrange90: #7A4D14;
+  --colorOrange100: #443809;
+  --colorOrange110: #0C0D01;
+  --colorRed10: #FAF2ED;
+  --colorRed20: #FEE0D2;
+  --colorRed30: #FFC7B5;
+  --colorRed40: #FFAA98;
+  --colorRed50: #FF867B;
+  --colorRed60: #FF4949;
+  --colorRed70: #CE3B2B;
+  --colorRed80: #9C3219;
+  --colorRed90: #6B290F;
+  --colorRed100: #391A08;
+  --colorRed110: #080401;
+  --colorRedAaf100: #FCECEA;
+  --colorRedAaf200: #F5C0B8;
+  --colorRedAaf300: #F8AEBA;
+  --colorRedAaf400: #DB4F66;
+  --colorRedAaf500: #D2324C;
+  --colorRedAaf600: #C8102E;
+  --colorMagenta10: #F5F5FF;
+  --colorMagenta20: #E4E0F8;
+  --colorMagenta30: #D7CCF2;
+  --colorMagenta40: #CDB8EB;
+  --colorMagenta50: #C7A4E5;
+  --colorMagenta60: #B981CF;
+  --colorMagenta70: #B15FBA;
+  --colorMagenta80: #A43D95;
+  --colorMagenta90: #722B6D;
+  --colorMagenta100: #3F183F;
+  --colorMagenta110: #0C050D;
+  --colorGrey10: #FAFAFA;
+  --colorGrey20: #EBEBEB;
+  --colorGrey30: #DCDCDC;
+  --colorGrey40: #CECECE;
+  --colorGrey50: #BFBFBF;
+  --colorGrey60: #A0A0A0;
+  --colorGrey70: #828282;
+  --colorGrey80: #616161;
+  --colorGrey90: #414141;
+  --colorGrey100: #212121;
+  --colorCoolgrey10: #EDFFFE;
+  --colorCoolgrey20: #DEEFEF;
+  --colorCoolgrey30: #CFDFDF;
+  --colorCoolgrey40: #C0CED0;
+  --colorCoolgrey50: #B1BEC0;
+  --colorCoolgrey60: #8D9CA0;
+  --colorCoolgrey70: #6C7A81;
+  --colorCoolgrey80: #445762;
+  --colorCoolgrey90: #253543;
+  --colorCoolgrey100: #0F1724;
+  --colorCoolgrey110: #010205;
+  --colorBlack: #000000;
+  --colorWhite: #ffffff;
+  --colorBlackShadow: #0000001A;
+  --colorWhiteShadow: #ffffff1A;
+  --colorFeedbackPositive: #13CE66; /* System status is positive */
+  --colorFeedbackWarning: #FFCC3D; /* System status has a warning */
+  --colorFeedbackNegative: #FF4949; /* System status is negative */
+  --colorBrandPrimary: #DB4F66; /* Primary brand blue */
+  --colorBrandSecondary: #C8102E;
+  --colorTextBrandPrimary: #DB4F66;
+  --colorTextTheme: #414141;
+  --colorTextDefault: #ffffff;
+  --colorTextDefaultSub: #FAFAFA;
+  --colorBackgroundTheme: #000000;
+  --colorBackgroundComponent: #414141;
+  --colorBackgroundObject: #ffffff;
+  --fontSize12: 12px;
+  --fontSize14: 14px;
+  --fontSize16: 16px;
+  --fontSize18: 18px;
+  --fontSize20: 20px;
+  --fontSize24: 24px;
+  --fontSize28: 28px;
+  --fontSize32: 32px;
+  --fontSize36: 36px;
+  --fontSize40: 40px;
+  --fontSize48: 48px;
+  --fontSizeXs: 12px;
+  --fontSizeS: 14px;
+  --fontSizeM: 16px;
+  --fontSizeL: 18px;
+  --fontSizeXl: 20px;
+  --fontSize2Xl: 24px;
+  --fontSize3Xl: 28px;
+  --fontSize4Xl: 32px;
+  --fontSize5Xl: 36px;
+  --fontSize6Xl: 40px;
+  --fontSize7Xl: 48px;
+  --lineHeight130: 1.3;
+  --lineHeight150: 1.5;
+  --lineHeightM: 1.3; /* Latin, Arabic, and Hebrew scripts */
+  --lineHeightL: 1.5; /* Latin, Arabic, and Hebrew scripts */
+  --fontWeightBold: 700;
+  --fontWeightRegular: 400;
+  --fontFamilyRoboto: Roboto; /* The primary font used in the DDS Design Kit is Roboto */
+  --fontFamilyBase: Roboto; /* The primary font used in the DDS Design Kit is Roboto */
+  --borderRadius2: 2px;
+  --borderRadius4: 4px;
+  --borderRadius6: 6px;
+  --borderRadius8: 8px;
+  --borderRadius10: 10px;
+  --borderRadius12: 12px;
+  --borderRadius16: 16px;
+  --borderRadius2Xs: 2px;
+  --borderRadiusXs: 4px;
+  --borderRadiusS: 6px;
+  --borderRadiusM: 8px;
+  --borderRadiusL: 10px;
+  --borderRadiusXl: 12px;
+  --borderRadius2Xl: 16px;
+  --borderWidth1: 1px;
+  --borderWidth2: 2px;
+  --borderWidth4: 4px;
+  --borderWidthS: 1px;
+  --borderWidthM: 2px;
+  --borderWidthL: 4px;
+  --space0: 0;
+  --space2: 2px;
+  --space4: 4px;
+  --space8: 8px;
+  --space12: 12px;
+  --space16: 16px;
+  --space20: 20px;
+  --space24: 24px;
+  --space32: 32px;
+  --space40: 40px;
+  --space48: 48px;
+  --space56: 56px;
+  --space64: 64px;
+  --space72: 72px;
+  --space80: 80px;
+  --space96: 96px;
+  --space4Xs: 0;
+  --space3Xs: 2px;
+  --space2Xs: 4px;
+  --spaceXs: 8px;
+  --spaceS: 12px;
+  --spaceM: 16px;
+  --spaceL: 20px;
+  --spaceXl: 24px;
+  --space2Xl: 32px;
+  --space3Xl: 40px;
+  --space4Xl: 48px;
+  --space5Xl: 56px;
+  --space6Xl: 64px;
+  --space7Xl: 72px;
+  --space8Xl: 80px;
+  --space9Xl: 96px;
+  --shadowBlack: 0 -2px 19px 0 #0000001A;
+  --shadowWhite: 0 -2px 19px 0 #ffffff1A;
+  --bodyXs: 400 12px/1.5 Roboto; /* Body is primarily used for components and for blocks of text. */
+  --bodyS: 400 14px/1.5 Roboto; /* Body is primarily used for components and for blocks of text. */
+  --bodyM: 400 16px/1.5 Roboto; /* Body is primarily used for components and for blocks of text. */
+  --bodyL: 400 18px/1.5 Roboto; /* Body is primarily used for components and for blocks of text. */
+  --bodyXl: 400 20px/1.5 Roboto; /* Body is primarily used for components and for blocks of text. */
+  --body2Xl: 400 24px/1.5 Roboto; /* Body is primarily used for components and for blocks of text. */
+  --body3Xl: 400 28px/1.5 Roboto; /* Body is primarily used for components and for blocks of text. */
+  --body4Xl: 400 32px/1.5 Roboto; /* Body is primarily used for components and for blocks of text. */
+  --body5Xl: 400 36px/1.5 Roboto; /* Body is primarily used for components and for blocks of text. */
+  --body6Xl: 400 40px/1.5 Roboto; /* Body is primarily used for components and for blocks of text. */
+  --body7Xl: 400 48px/1.5 Roboto; /* Body is primarily used for components and for blocks of text. */
+  --headerXs: 700 12px/1.3 Roboto; /* Header is used to create various levels of typographic hierarchies. */
+  --headerS: 700 14px/1.3 Roboto; /* Header is used to create various levels of typographic hierarchies. */
+  --headerM: 700 16px/1.3 Roboto; /* Header is used to create various levels of typographic hierarchies. */
+  --headerL: 700 18px/1.3 Roboto; /* Header is used to create various levels of typographic hierarchies. */
+  --headerXl: 700 20px/1.3 Roboto; /* Header is used to create various levels of typographic hierarchies. */
+  --header2Xl: 700 24px/1.3 Roboto; /* Header is used to create various levels of typographic hierarchies. */
+  --header3Xl: 700 28px/1.3 Roboto; /* Header is used to create various levels of typographic hierarchies. */
+  --header4Xl: 700 32px/1.3 Roboto; /* Header is used to create various levels of typographic hierarchies. */
+  --header5Xl: 700 36px/1.3 Roboto; /* Header is used to create various levels of typographic hierarchies. */
+  --header6Xl: 700 40px/1.3 Roboto; /* Header is used to create various levels of typographic hierarchies. */
+  --header7Xl: 700 48px/1.3 Roboto; /* Header is used to create various levels of typographic hierarchies. */
+  --buttonBorderSignInActive: 1px Inside #616161;
+  --buttonBorderSecondaryActive: 1px Solid #DB4F66;
+  --buttonBorderSecondaryHover: 1px Solid #C8102E;
+  --buttonBorderSecondaryPress: 1px Solid #F8AEBA;
+  --buttonBorderSecondaryFocus: 1px Solid #F5C0B8;
+  --buttonBorderSecondaryDisabled: 1px Solid #616161;
+  --buttonColorBackgroundPrimaryActive: #DB4F66; /* Color used for the default state of a secondary button */
+  --buttonColorBackgroundPrimaryHover: #C8102E;
+  --buttonColorBackgroundPrimaryPress: #F8AEBA;
+  --buttonColorBackgroundPrimaryFocus: #F5C0B8;
+  --buttonColorBackgroundPrimaryDisabled: #616161;
+  --buttonColorBorderSecondaryActive: #DB4F66;
+  --buttonColorBorderSecondaryHover: #C8102E;
+  --buttonColorBorderSecondaryPress: #F8AEBA;
+  --buttonColorBorderSecondaryFocus: #F5C0B8;
+  --buttonColorBorderSecondaryDisabled: #616161;
+  --buttonColorTextSecondaryActive: #DB4F66;
+  --buttonColorTextSecondaryHover: #C8102E;
+  --buttonColorTextSecondaryPress: #F8AEBA;
+  --buttonColorTextSecondaryFocus: #F5C0B8;
+  --buttonColorTextSecondaryDisabled: #616161;
+  --buttonColorTextPrimary: #414141;
+  --checkboxBorderUnselected: 2px solid #BFBFBF;
+  --checkboxColorBackground: #0097E0;
+  --checkboxColorIcon: #ffffff;
+  --dropdownColorBackground: #ffffff;
+  --dropdownColorText: #414141;
+  --dropdownTrayColorBackgroundSelected: #EBEBEB;
+  --tableColorBackground: #ffffff;
+  --tableColorText: #414141;
+  --tableHeaderBorder: 1px  #000000;
+  --tableCellBorder: 1px  #EBEBEB;
+  --tablePageNumberColorBackgroundSelected: #828282;
+  --tablePageNumberColorTextDefault: #414141;
+  --tablePageNumberColorTextSelected: #ffffff;
+  --tablePageNumberBorderHover: 1px  #828282;
+  --loginSsoButtonBorder: 1px  #616161;
+  --loginSsoButtonColorText: #616161;
+  --formColorBackground: #ffffff;
+  --formColorTextDefault: #212121;
+  --formColorTextPlaceholder: #828282;
+  --formColorTextPositive: #13CE66;
+  --formColorTextNegative: #FF4949;
+  --formBorderActive: 1px Solid #828282;
+  --formBorderNegative: 1px solid #FF4949;
+  --tabBorderUnderline: 1px  #CFDFDF;
+  --tabBorderSelected: 1px  #0097E0;
+  --containerColorBackground: #414141;
+  --containerColorTextHeader: #ffffff;
+  --containerColorTextBody: #FAFAFA;
+  --containerShadow: 0 -2px 19px 0 #ffffff1A;
+  --iconColorBackground: #ffffff;
+}

package/build/css/AAF/Light/buttons.css

@@ -0,0 +1,29 @@
+/**
+ * Do not edit directly
+ * Generated on Fri, 31 May 2024 20:50:38 GMT
+ */
+
+:root {
+  --buttonBorderSignInActive: 1px Inside #616161;
+  --buttonBorderSecondaryActive: 1px Solid #C8102E;
+  --buttonBorderSecondaryHover: 1px Solid #DB4F66;
+  --buttonBorderSecondaryPress: 1px Solid #D2324C;
+  --buttonBorderSecondaryFocus: 1px Solid #F8AEBA;
+  --buttonBorderSecondaryDisabled: 1px Solid #DCDCDC;
+  --buttonColorBackgroundPrimaryActive: #C8102E; /* Color used for the default state of a secondary button */
+  --buttonColorBackgroundPrimaryHover: #DB4F66;
+  --buttonColorBackgroundPrimaryPress: #D2324C;
+  --buttonColorBackgroundPrimaryFocus: #F8AEBA;
+  --buttonColorBackgroundPrimaryDisabled: #DCDCDC;
+  --buttonColorBorderSecondaryActive: #C8102E;
+  --buttonColorBorderSecondaryHover: #DB4F66;
+  --buttonColorBorderSecondaryPress: #D2324C;
+  --buttonColorBorderSecondaryFocus: #F8AEBA;
+  --buttonColorBorderSecondaryDisabled: #DCDCDC;
+  --buttonColorTextSecondaryActive: #C8102E;
+  --buttonColorTextSecondaryHover: #DB4F66;
+  --buttonColorTextSecondaryPress: #D2324C;
+  --buttonColorTextSecondaryFocus: #F8AEBA;
+  --buttonColorTextSecondaryDisabled: #DCDCDC;
+  --buttonColorTextPrimary: #ffffff;
+}

package/build/css/AAF/Light/variables.css

@@ -0,0 +1,276 @@
+/**
+ * Do not edit directly
+ * Generated on Fri, 31 May 2024 20:50:38 GMT
+ */
+
+:root {
+  --colorBlue10: #D1F3FF;
+  --colorBlue20: #A6E4FB;
+  --colorBlue30: #7CD5F7;
+  --colorBlue40: #54c3f1;
+  --colorBlue50: #2DB8F0;
+  --colorBlue60: #0097E0;
+  --colorBlue70: #0674C1;
+  --colorBlue80: #0D59A3;
+  --colorBlue90: #114484;
+  --colorBlue100: #143466;
+  --colorBlue110: #132547;
+  --colorBlue120: #0E1629;
+  --colorBlue130: #04060A;
+  --colorGreen10: #F4FFE6;
+  --colorGreen20: #D0F8B9;
+  --colorGreen30: #9FF28F;
+  --colorGreen40: #69EB6E;
+  --colorGreen50: #45E46A;
+  --colorGreen60: #13CE66;
+  --colorGreen70: #04A632;
+  --colorGreen80: #007F0E;
+  --colorGreen90: #055700;
+  --colorGreen100: #0B2F00;
+  --colorGreen110: #030800;
+  --colorYellow10: #FCFFE6;
+  --colorYellow20: #FDFFBB;
+  --colorYellow30: #FFF890;
+  --colorYellow40: #FFE667;
+  --colorYellow50: #FFCC3D;
+  --colorYellow60: #D7B834;
+  --colorYellow70: #AFA02E;
+  --colorYellow80: #878429;
+  --colorYellow90: #5C5F21;
+  --colorYellow100: #333717;
+  --colorYellow110: #0E0F07;
+  --colorOrange10: #FFF4E6;
+  --colorOrange20: #FFE7CD;
+  --colorOrange30: #FFD8B5;
+  --colorOrange40: #FFC69A;
+  --colorOrange50: #FFB27F;
+  --colorOrange60: #F68C54;
+  --colorOrange70: #E86427;
+  --colorOrange80: #B15C20;
+  --colorOrange90: #7A4D14;
+  --colorOrange100: #443809;
+  --colorOrange110: #0C0D01;
+  --colorRed10: #FAF2ED;
+  --colorRed20: #FEE0D2;
+  --colorRed30: #FFC7B5;
+  --colorRed40: #FFAA98;
+  --colorRed50: #FF867B;
+  --colorRed60: #FF4949;
+  --colorRed70: #CE3B2B;
+  --colorRed80: #9C3219;
+  --colorRed90: #6B290F;
+  --colorRed100: #391A08;
+  --colorRed110: #080401;
+  --colorRedAaf100: #FCECEA;
+  --colorRedAaf200: #F5C0B8;
+  --colorRedAaf300: #F8AEBA;
+  --colorRedAaf400: #DB4F66;
+  --colorRedAaf500: #D2324C;
+  --colorRedAaf600: #C8102E;
+  --colorMagenta10: #F5F5FF;
+  --colorMagenta20: #E4E0F8;
+  --colorMagenta30: #D7CCF2;
+  --colorMagenta40: #CDB8EB;
+  --colorMagenta50: #C7A4E5;
+  --colorMagenta60: #B981CF;
+  --colorMagenta70: #B15FBA;
+  --colorMagenta80: #A43D95;
+  --colorMagenta90: #722B6D;
+  --colorMagenta100: #3F183F;
+  --colorMagenta110: #0C050D;
+  --colorGrey10: #FAFAFA;
+  --colorGrey20: #EBEBEB;
+  --colorGrey30: #DCDCDC;
+  --colorGrey40: #CECECE;
+  --colorGrey50: #BFBFBF;
+  --colorGrey60: #A0A0A0;
+  --colorGrey70: #828282;
+  --colorGrey80: #616161;
+  --colorGrey90: #414141;
+  --colorGrey100: #212121;
+  --colorCoolgrey10: #EDFFFE;
+  --colorCoolgrey20: #DEEFEF;
+  --colorCoolgrey30: #CFDFDF;
+  --colorCoolgrey40: #C0CED0;
+  --colorCoolgrey50: #B1BEC0;
+  --colorCoolgrey60: #8D9CA0;
+  --colorCoolgrey70: #6C7A81;
+  --colorCoolgrey80: #445762;
+  --colorCoolgrey90: #253543;
+  --colorCoolgrey100: #0F1724;
+  --colorCoolgrey110: #010205;
+  --colorBlack: #000000;
+  --colorWhite: #ffffff;
+  --colorBlackShadow: #0000001A;
+  --colorWhiteShadow: #ffffff1A;
+  --colorFeedbackPositive: #13CE66; /* System status is positive */
+  --colorFeedbackWarning: #FFCC3D; /* System status has a warning */
+  --colorFeedbackNegative: #FF4949; /* System status is negative */
+  --colorBrandPrimary: #C8102E; /* Primary brand blue */
+  --colorBrandSecondary: #DB4F66;
+  --colorTextBrandPrimary: #C8102E;
+  --colorTextTheme: #ffffff;
+  --colorTextDefault: #414141;
+  --colorTextDefaultSub: #828282;
+  --colorBackgroundTheme: #ffffff;
+  --colorBackgroundComponent: #ffffff;
+  --colorBackgroundObject: #414141;
+  --fontSize12: 12px;
+  --fontSize14: 14px;
+  --fontSize16: 16px;
+  --fontSize18: 18px;
+  --fontSize20: 20px;
+  --fontSize24: 24px;
+  --fontSize28: 28px;
+  --fontSize32: 32px;
+  --fontSize36: 36px;
+  --fontSize40: 40px;
+  --fontSize48: 48px;
+  --fontSizeXs: 12px;
+  --fontSizeS: 14px;
+  --fontSizeM: 16px;
+  --fontSizeL: 18px;
+  --fontSizeXl: 20px;
+  --fontSize2Xl: 24px;
+  --fontSize3Xl: 28px;
+  --fontSize4Xl: 32px;
+  --fontSize5Xl: 36px;
+  --fontSize6Xl: 40px;
+  --fontSize7Xl: 48px;
+  --lineHeight130: 1.3;
+  --lineHeight150: 1.5;
+  --lineHeightM: 1.3; /* Latin, Arabic, and Hebrew scripts */
+  --lineHeightL: 1.5; /* Latin, Arabic, and Hebrew scripts */
+  --fontWeightBold: 700;
+  --fontWeightRegular: 400;
+  --fontFamilyRoboto: Roboto; /* The primary font used in the DDS Design Kit is Roboto */
+  --fontFamilyBase: Roboto; /* The primary font used in the DDS Design Kit is Roboto */
+  --borderRadius2: 2px;
+  --borderRadius4: 4px;
+  --borderRadius6: 6px;
+  --borderRadius8: 8px;
+  --borderRadius10: 10px;
+  --borderRadius12: 12px;
+  --borderRadius16: 16px;
+  --borderRadius2Xs: 2px;
+  --borderRadiusXs: 4px;
+  --borderRadiusS: 6px;
+  --borderRadiusM: 8px;
+  --borderRadiusL: 10px;
+  --borderRadiusXl: 12px;
+  --borderRadius2Xl: 16px;
+  --borderWidth1: 1px;
+  --borderWidth2: 2px;
+  --borderWidth4: 4px;
+  --borderWidthS: 1px;
+  --borderWidthM: 2px;
+  --borderWidthL: 4px;
+  --space0: 0;
+  --space2: 2px;
+  --space4: 4px;
+  --space8: 8px;
+  --space12: 12px;
+  --space16: 16px;
+  --space20: 20px;
+  --space24: 24px;
+  --space32: 32px;
+  --space40: 40px;
+  --space48: 48px;
+  --space56: 56px;
+  --space64: 64px;
+  --space72: 72px;
+  --space80: 80px;
+  --space96: 96px;
+  --space4Xs: 0;
+  --space3Xs: 2px;
+  --space2Xs: 4px;
+  --spaceXs: 8px;
+  --spaceS: 12px;
+  --spaceM: 16px;
+  --spaceL: 20px;
+  --spaceXl: 24px;
+  --space2Xl: 32px;
+  --space3Xl: 40px;
+  --space4Xl: 48px;
+  --space5Xl: 56px;
+  --space6Xl: 64px;
+  --space7Xl: 72px;
+  --space8Xl: 80px;
+  --space9Xl: 96px;
+  --shadowBlack: 0 -2px 19px 0 #0000001A;
+  --shadowWhite: 0 -2px 19px 0 #ffffff1A;
+  --bodyXs: 400 12px/1.5 Roboto; /* Body is primarily used for components and for blocks of text. */
+  --bodyS: 400 14px/1.5 Roboto; /* Body is primarily used for components and for blocks of text. */
+  --bodyM: 400 16px/1.5 Roboto; /* Body is primarily used for components and for blocks of text. */
+  --bodyL: 400 18px/1.5 Roboto; /* Body is primarily used for components and for blocks of text. */
+  --bodyXl: 400 20px/1.5 Roboto; /* Body is primarily used for components and for blocks of text. */
+  --body2Xl: 400 24px/1.5 Roboto; /* Body is primarily used for components and for blocks of text. */
+  --body3Xl: 400 28px/1.5 Roboto; /* Body is primarily used for components and for blocks of text. */
+  --body4Xl: 400 32px/1.5 Roboto; /* Body is primarily used for components and for blocks of text. */
+  --body5Xl: 400 36px/1.5 Roboto; /* Body is primarily used for components and for blocks of text. */
+  --body6Xl: 400 40px/1.5 Roboto; /* Body is primarily used for components and for blocks of text. */
+  --body7Xl: 400 48px/1.5 Roboto; /* Body is primarily used for components and for blocks of text. */
+  --headerXs: 700 12px/1.3 Roboto; /* Header is used to create various levels of typographic hierarchies. */
+  --headerS: 700 14px/1.3 Roboto; /* Header is used to create various levels of typographic hierarchies. */
+  --headerM: 700 16px/1.3 Roboto; /* Header is used to create various levels of typographic hierarchies. */
+  --headerL: 700 18px/1.3 Roboto; /* Header is used to create various levels of typographic hierarchies. */
+  --headerXl: 700 20px/1.3 Roboto; /* Header is used to create various levels of typographic hierarchies. */
+  --header2Xl: 700 24px/1.3 Roboto; /* Header is used to create various levels of typographic hierarchies. */
+  --header3Xl: 700 28px/1.3 Roboto; /* Header is used to create various levels of typographic hierarchies. */
+  --header4Xl: 700 32px/1.3 Roboto; /* Header is used to create various levels of typographic hierarchies. */
+  --header5Xl: 700 36px/1.3 Roboto; /* Header is used to create various levels of typographic hierarchies. */
+  --header6Xl: 700 40px/1.3 Roboto; /* Header is used to create various levels of typographic hierarchies. */
+  --header7Xl: 700 48px/1.3 Roboto; /* Header is used to create various levels of typographic hierarchies. */
+  --buttonBorderSignInActive: 1px Inside #616161;
+  --buttonBorderSecondaryActive: 1px Solid #C8102E;
+  --buttonBorderSecondaryHover: 1px Solid #DB4F66;
+  --buttonBorderSecondaryPress: 1px Solid #D2324C;
+  --buttonBorderSecondaryFocus: 1px Solid #F8AEBA;
+  --buttonBorderSecondaryDisabled: 1px Solid #DCDCDC;
+  --buttonColorBackgroundPrimaryActive: #C8102E; /* Color used for the default state of a secondary button */
+  --buttonColorBackgroundPrimaryHover: #DB4F66;
+  --buttonColorBackgroundPrimaryPress: #D2324C;
+  --buttonColorBackgroundPrimaryFocus: #F8AEBA;
+  --buttonColorBackgroundPrimaryDisabled: #DCDCDC;
+  --buttonColorBorderSecondaryActive: #C8102E;
+  --buttonColorBorderSecondaryHover: #DB4F66;
+  --buttonColorBorderSecondaryPress: #D2324C;
+  --buttonColorBorderSecondaryFocus: #F8AEBA;
+  --buttonColorBorderSecondaryDisabled: #DCDCDC;
+  --buttonColorTextSecondaryActive: #C8102E;
+  --buttonColorTextSecondaryHover: #DB4F66;
+  --buttonColorTextSecondaryPress: #D2324C;
+  --buttonColorTextSecondaryFocus: #F8AEBA;
+  --buttonColorTextSecondaryDisabled: #DCDCDC;
+  --buttonColorTextPrimary: #ffffff;
+  --checkboxBorderUnselected: 2px solid #BFBFBF;
+  --checkboxColorBackground: #0097E0;
+  --checkboxColorIcon: #ffffff;
+  --dropdownColorBackground: #ffffff;
+  --dropdownColorText: #414141;
+  --dropdownTrayColorBackgroundSelected: #EBEBEB;
+  --tableColorBackground: #ffffff;
+  --tableColorText: #414141;
+  --tableHeaderBorder: 1px  #000000;
+  --tableCellBorder: 1px  #EBEBEB;
+  --tablePageNumberColorBackgroundSelected: #828282;
+  --tablePageNumberColorTextDefault: #414141;
+  --tablePageNumberColorTextSelected: #ffffff;
+  --tablePageNumberBorderHover: 1px  #828282;
+  --loginSsoButtonBorder: 1px  #616161;
+  --loginSsoButtonColorText: #616161;
+  --formColorBackground: #ffffff;
+  --formColorTextDefault: #212121;
+  --formColorTextPlaceholder: #828282;
+  --formColorTextPositive: #13CE66;
+  --formColorTextNegative: #FF4949;
+  --formBorderActive: 1px Solid #828282;
+  --formBorderNegative: 1px solid #FF4949;
+  --tabBorderUnderline: 1px  #CFDFDF;
+  --tabBorderSelected: 1px  #0097E0;
+  --containerColorBackground: #ffffff;
+  --containerColorTextHeader: #414141;
+  --containerColorTextBody: #828282;
+  --containerShadow: 0 -2px 19px 0 #0000001A;
+  --iconColorBackground: #414141;
+}

package/build/css/DKN/Dark/buttons.css

@@ -0,0 +1,29 @@
+/**
+ * Do not edit directly
+ * Generated on Fri, 31 May 2024 20:50:38 GMT
+ */
+
+:root {
+  --buttonBorderSignInActive: 1px Inside #616161;
+  --buttonBorderSecondaryActive: 1px Solid #54c3f1;
+  --buttonBorderSecondaryHover: 1px Solid #0097E0;
+  --buttonBorderSecondaryPress: 1px Solid #7CD5F7;
+  --buttonBorderSecondaryFocus: 1px Solid #A6E4FB;
+  --buttonBorderSecondaryDisabled: 1px Solid #616161;
+  --buttonColorBackgroundPrimaryActive: #54c3f1; /* Color used for the default state of a secondary button */
+  --buttonColorBackgroundPrimaryHover: #0097E0;
+  --buttonColorBackgroundPrimaryPress: #7CD5F7;
+  --buttonColorBackgroundPrimaryFocus: #A6E4FB;
+  --buttonColorBackgroundPrimaryDisabled: #616161;
+  --buttonColorBorderSecondaryActive: #54c3f1;
+  --buttonColorBorderSecondaryHover: #0097E0;
+  --buttonColorBorderSecondaryPress: #7CD5F7;
+  --buttonColorBorderSecondaryFocus: #A6E4FB;
+  --buttonColorBorderSecondaryDisabled: #616161;
+  --buttonColorTextSecondaryActive: #54c3f1;
+  --buttonColorTextSecondaryHover: #0097E0;
+  --buttonColorTextSecondaryPress: #7CD5F7;
+  --buttonColorTextSecondaryFocus: #A6E4FB;
+  --buttonColorTextSecondaryDisabled: #616161;
+  --buttonColorTextPrimary: #212121;
+}