Big News: Socket raises $60M Series C at a $1B valuation to secure software supply chains for AI-driven development.Announcement →
Sign In

@quadrats/theme

Package Overview
Dependencies
Maintainers
2
Versions
10
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@quadrats/theme - npm Package Compare versions

Comparing version
0.7.4
 to
1.0.0
+2
effect.d.ts
import { EffectObject } from './typings';
export declare const QDR_EFFECT: EffectObject;
+21
effect.js
const QDR_EFFECT = {
durationShortest: '150ms',
durationShorter: '200ms',
durationShort: '250ms',
durationStandard: '300ms',
durationLong: '375ms',
durationLonger: '450ms',
durationLongest: '600ms',
easingStandard: 'cubic-bezier(0.58, 0.01, 0.29, 1.01)',
easingEmphasized: 'cubic-bezier(0.83, 0, 0.17, 1)',
easingDecelerated: 'cubic-bezier(0, 0, 0.3, 1)',
easingAccelerated: 'cubic-bezier(0.32, 0, 0.67, 0)',
'shadow-xs': '0px 2px 6px 0px rgba(0, 0, 0, 0.08), 0px 1px 2px 0px rgba(0, 0, 0, 0.01)',
'shadow-s': '0px 4px 8px -2px rgba(0, 0, 0, 0.10), 0px 2px 4px -2px rgba(0, 0, 0, 0.04)',
'shadow-m': '0px 12px 16px -4px rgba(0, 0, 0, 0.08), 0px 4px 6px -2px rgba(0, 0, 0, 0.03)',
'shadow-l': '0px 20px 24px -4px rgba(0, 0, 0, 0.08), 0px 8px 8px -4px rgba(0, 0, 0, 0.03)',
'shadow-xl': '0px 24px 48px -12px rgba(0, 0, 0, 0.18), 0px 4px 8px 2px rgba(0, 0, 0, 0.04)',
'shadow-2xl': '0px 32px 64px -12px rgba(0, 0, 0, 0.25), 0px 4px 8px 2px rgba(0, 0, 0, 0.04)',
};
export { QDR_EFFECT };
+2
spacing.d.ts
import { SpacingObject } from './typings';
export declare const QDR_SPACING: SpacingObject;
+133
spacing.js
const QDR_SPACING = {
'spacing-0': '0rem',
'spacing-1': '0.165rem',
'spacing-2': '0.25rem',
'spacing-3': '0.375rem',
'spacing-4': '0.5rem',
'spacing-5': '0.625rem',
'spacing-6': '0.75rem',
'spacing-7': '1rem',
'spacing-8': '1.25rem',
'spacing-9': '1.5rem',
'spacing-10': '1.75rem',
'spacing-11': '2rem',
'spacing-12': '2.25rem',
'spacing-13': '2.5rem',
'spacing-14': '3rem',
'spacing-18': '5rem',
'spacing-19': '6rem',
'spacing-21': '7.5rem',
'spacing-24': '10rem',
'spacing-25': '12.5rem',
'spacing-27': '16rem',
'spacing-28': '17.5rem',
'spacing-30': '22.5rem',
'radius-1': '0.25rem',
'radius-2': '0.375rem',
'radius-3': '0.5rem',
'radius-4': '0.625rem',
'radius-5': '0.75rem',
'radius-6': '1rem',
'modal-size-s': '420px',
'modal-size-m': '540px',
'modal-size-l': '720px',
'modal-size-xl': '100%',
typographyArticleH1FontSize: '2rem',
typographyArticleH1LineHeight: '1.4',
typographyArticleH1LetterSpacing: '0',
typographyArticleH1FontWeight: '600',
typographyArticleH2FontSize: '1.5rem',
typographyArticleH2LineHeight: '1.4',
typographyArticleH2LetterSpacing: '0',
typographyArticleH2FontWeight: '600',
typographyArticleH3FontSize: '1.3125rem',
typographyArticleH3LineHeight: '1.45',
typographyArticleH3LetterSpacing: '0',
typographyArticleH3FontWeight: '600',
typographyArticleH4FontSize: '1.125rem',
typographyArticleH4LineHeight: '1.45',
typographyArticleH4LetterSpacing: '0',
typographyArticleH4FontWeight: '600',
typographyArticleH5FontSize: '1rem',
typographyArticleH5LineHeight: '1.5',
typographyArticleH5LetterSpacing: '0',
typographyArticleH5FontWeight: '600',
typographyArticleH6FontSize: '0.8125rem',
typographyArticleH6LineHeight: '1.5',
typographyArticleH6LetterSpacing: '0',
typographyArticleH6FontWeight: '600',
typographyArticleSubtitle1FontSize: '1rem',
typographyArticleSubtitle1LineHeight: '1.5',
typographyArticleSubtitle1LetterSpacing: '0',
typographyArticleSubtitle1FontWeight: '400',
typographyArticleBody1FontSize: '1rem',
typographyArticleBody1LineHeight: '1.65',
typographyArticleBody1LetterSpacing: '0',
typographyArticleBody1FontWeight: '400',
typographyArticleBody2FontSize: '0.8125rem',
typographyArticleBody2LineHeight: '1.7',
typographyArticleBody2LetterSpacing: '0',
typographyArticleBody2FontWeight: '400',
typographyBasicH1FontSize: '2rem',
typographyBasicH1LineHeight: '1.5',
typographyBasicH1LetterSpacing: '0',
typographyBasicH1FontWeight: '600',
typographyBasicH2FontSize: '1.5rem',
typographyBasicH2LineHeight: '1.5',
typographyBasicH2LetterSpacing: '0',
typographyBasicH2FontWeight: '600',
typographyBasicH3FontSize: '1.3125rem',
typographyBasicH3LineHeight: '1.45',
typographyBasicH3LetterSpacing: '0',
typographyBasicH3FontWeight: '500',
typographyBasicH4FontSize: '1.125rem',
typographyBasicH4LineHeight: '1.55',
typographyBasicH4LetterSpacing: '0',
typographyBasicH4FontWeight: '500',
typographyBasicH5FontSize: '0.9375rem',
typographyBasicH5LineHeight: '1.6',
typographyBasicH5LetterSpacing: '0',
typographyBasicH5FontWeight: '500',
typographyBasicH6FontSize: '0.8125rem',
typographyBasicH6LineHeight: '1.5',
typographyBasicH6LetterSpacing: '0',
typographyBasicH6FontWeight: '500',
typographyBasicButton1FontSize: '0.9375rem',
typographyBasicButton1LineHeight: '2.65',
typographyBasicButton1LetterSpacing: '0',
typographyBasicButton1FontWeight: '500',
typographyBasicButton2FontSize: '0.9375rem',
typographyBasicButton2LineHeight: '2.15',
typographyBasicButton2LetterSpacing: '0',
typographyBasicButton2FontWeight: '500',
typographyBasicButton3FontSize: '0.8125rem',
typographyBasicButton3LineHeight: '1.85',
typographyBasicButton3LetterSpacing: '0',
typographyBasicButton3FontWeight: '500',
typographyBasicInput1FontSize: '0.9375rem',
typographyBasicInput1LineHeight: '2.65',
typographyBasicInput1LetterSpacing: '0',
typographyBasicInput1FontWeight: '400',
typographyBasicInput2FontSize: '0.9375rem',
typographyBasicInput2LineHeight: '2.15',
typographyBasicInput2LetterSpacing: '0',
typographyBasicInput2FontWeight: '400',
typographyBasicInput3FontSize: '0.8125rem',
typographyBasicInput3LineHeight: '1.85',
typographyBasicInput3LetterSpacing: '0',
typographyBasicInput3FontWeight: '400',
typographyBasicBody1FontSize: '0.9375rem',
typographyBasicBody1LineHeight: '1.6',
typographyBasicBody1LetterSpacing: '0',
typographyBasicBody1FontWeight: '400',
typographyBasicBody2FontSize: '0.8125rem',
typographyBasicBody2LineHeight: '1.5',
typographyBasicBody2LetterSpacing: '0',
typographyBasicBody2FontWeight: '400',
typographyBasicCaptionFontSize: '0.75rem',
typographyBasicCaptionLineHeight: '1.35',
typographyBasicCaptionLetterSpacing: '0',
typographyBasicCaptionFontWeight: '400',
};
export { QDR_SPACING };
+21
theming/_effect.scss
$qdr-effect: (
duration-shortest: 150ms,
duration-shorter: 200ms,
duration-short: 250ms,
duration-standard: 300ms,
duration-long: 375ms,
duration-longer: 450ms,
duration-longest: 600ms,
easing-standard: cubic-bezier(0.58, 0.01, 0.29, 1.01),
easing-emphasized: cubic-bezier(0.83, 0, 0.17, 1),
easing-decelerated: cubic-bezier(0, 0, 0.3, 1),
easing-accelerated: cubic-bezier(0.32, 0, 0.67, 0),
shadow-xs: (0 2px 6px 0 rgb(0 0 0 / 8%), 0 1px 2px 0 rgb(0 0 0 / 1%)),
shadow-s: (0 4px 8px -2px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 4%)),
shadow-m: (0 12px 16px -4px rgb(0 0 0 / 8%), 0 4px 6px -2px rgb(0 0 0 / 3%)),
shadow-l: (0 20px 24px -4px rgb(0 0 0 / 8%), 0 8px 8px -4px rgb(0 0 0 / 3%)),
shadow-xl: (0 24px 48px -12px rgb(0 0 0 / 18%), 0 4px 8px 2px rgb(0 0 0 / 4%)),
shadow-2xl: (0 32px 64px -12px rgb(0 0 0 / 25%), 0 4px 8px 2px rgb(0 0 0 / 4%)),
);
+157
theming/_spacing.scss
$qdr-spacing: (
spacing-0: 0,
spacing-1: 0.165rem,
spacing-2: 0.25rem,
spacing-3: 0.375rem,
spacing-4: 0.5rem,
spacing-5: 0.625rem,
spacing-6: 0.75rem,
spacing-7: 1rem,
spacing-8: 1.25rem,
spacing-9: 1.5rem,
spacing-10: 1.75rem,
spacing-11: 2rem,
spacing-12: 2.25rem,
spacing-13: 2.5rem,
spacing-14: 3rem,
spacing-18: 5rem,
spacing-19: 6rem,
spacing-21: 7.5rem,
spacing-24: 10rem,
spacing-25: 12.5rem,
spacing-27: 16rem,
spacing-28: 17.5rem,
spacing-30: 22.5rem,
radius-1: 0.25rem,
radius-2: 0.375rem,
radius-3: 0.5rem,
radius-4: 0.625rem,
radius-5: 0.75rem,
radius-6: 1rem,
modal-size-s: 420px,
modal-size-m: 540px,
modal-size-l: 720px,
modal-size-xl: 100%,
typography-article-h1-font-size: 2rem,
typography-article-h1-line-height: 1.4,
typography-article-h1-letter-spacing: 0,
typography-article-h1-font-weight: 600,
typography-article-h2-font-size: 1.5rem,
typography-article-h2-line-height: 1.4,
typography-article-h2-letter-spacing: 0,
typography-article-h2-font-weight: 600,
typography-article-h3-font-size: 1.3125rem,
typography-article-h3-line-height: 1.45,
typography-article-h3-letter-spacing: 0,
typography-article-h3-font-weight: 600,
typography-article-h4-font-size: 1.125rem,
typography-article-h4-line-height: 1.45,
typography-article-h4-letter-spacing: 0,
typography-article-h4-font-weight: 600,
typography-article-h5-font-size: 1rem,
typography-article-h5-line-height: 1.5,
typography-article-h5-letter-spacing: 0,
typography-article-h5-font-weight: 600,
typography-article-h6-font-size: 0.8125rem,
typography-article-h6-line-height: 1.5,
typography-article-h6-letter-spacing: 0,
typography-article-h6-font-weight: 600,
typography-article-subtitle1-font-size: 1rem,
typography-article-subtitle1-line-height: 1.5,
typography-article-subtitle1-letter-spacing: 0,
typography-article-subtitle1-font-weight: 400,
typography-article-body1-font-size: 1rem,
typography-article-body1-line-height: 1.65,
typography-article-body1-letter-spacing: 0,
typography-article-body1-font-weight: 400,
typography-article-body2-font-size: 0.8125rem,
typography-article-body2-line-height: 1.7,
typography-article-body2-letter-spacing: 0,
typography-article-body2-font-weight: 400,
typography-basic-h1-font-size: 2rem,
typography-basic-h1-line-height: 1.5,
typography-basic-h1-letter-spacing: 0,
typography-basic-h1-font-weight: 600,
typography-basic-h2-font-size: 1.5rem,
typography-basic-h2-line-height: 1.5,
typography-basic-h2-letter-spacing: 0,
typography-basic-h2-font-weight: 600,
typography-basic-h3-font-size: 1.3125rem,
typography-basic-h3-line-height: 1.45,
typography-basic-h3-letter-spacing: 0,
typography-basic-h3-font-weight: 500,
typography-basic-h4-font-size: 1.125rem,
typography-basic-h4-line-height: 1.55,
typography-basic-h4-letter-spacing: 0,
typography-basic-h4-font-weight: 500,
typography-basic-h5-font-size: 0.9375rem,
typography-basic-h5-line-height: 1.6,
typography-basic-h5-letter-spacing: 0,
typography-basic-h5-font-weight: 500,
typography-basic-h6-font-size: 0.8125rem,
typography-basic-h6-line-height: 1.5,
typography-basic-h6-letter-spacing: 0,
typography-basic-h6-font-weight: 500,
typography-basic-button1-font-size: 0.9375rem,
typography-basic-button1-line-height: 2.65,
typography-basic-button1-letter-spacing: 0,
typography-basic-button1-font-weight: 500,
typography-basic-button2-font-size: 0.9375rem,
typography-basic-button2-line-height: 2.15,
typography-basic-button2-letter-spacing: 0,
typography-basic-button2-font-weight: 500,
typography-basic-button3-font-size: 0.8125rem,
typography-basic-button3-line-height: 1.85,
typography-basic-button3-letter-spacing: 0,
typography-basic-button3-font-weight: 500,
typography-basic-input1-font-size: 0.9375rem,
typography-basic-input1-line-height: 2.65,
typography-basic-input1-letter-spacing: 0,
typography-basic-input1-font-weight: 400,
typography-basic-input2-font-size: 0.9375rem,
typography-basic-input2-line-height: 2.15,
typography-basic-input2-letter-spacing: 0,
typography-basic-input2-font-weight: 400,
typography-basic-input3-font-size: 0.8125rem,
typography-basic-input3-line-height: 1.85,
typography-basic-input3-letter-spacing: 0,
typography-basic-input3-font-weight: 400,
typography-basic-body1-font-size: 0.9375rem,
typography-basic-body1-line-height: 1.6,
typography-basic-body1-letter-spacing: 0,
typography-basic-body1-font-weight: 400,
typography-basic-body2-font-size: 0.8125rem,
typography-basic-body2-line-height: 1.5,
typography-basic-body2-letter-spacing: 0,
typography-basic-body2-font-weight: 400,
typography-basic-caption-font-size: 0.75rem,
typography-basic-caption-line-height: 1.35,
typography-basic-caption-letter-spacing: 0,
typography-basic-caption-font-weight: 400,
);
+24
theming/_styles.scss
@use 'sass:map';
@use './effect';
@use './palettes';
@use './spacing';
@function assign($map, $maps...) {
@each $m in $maps {
$map: map.merge($map, $m);
}
@return $map;
}
$qdr-palette-qdr: assign(
effect.$qdr-effect,
palettes.$palette-light,
spacing.$qdr-spacing,
);
$qdr-palette-qdr-dark: assign(
effect.$qdr-effect,
palettes.$palette-dark,
spacing.$qdr-spacing,
)
+155
-13
index.cjs.js
'use strict';
const THEME_QDR = {
primaryLight: '#c1eef2',
primary: '#1cc1d0',
primaryDark: '#16aab8',
background: '#f5f5f5',
surface: '#fff',
text: '#000',
border: '#e0e0e0',
divider: '#c1c1c1',
placeholder: '#4a4a4a',
icon: '#7d7d7d',
sup: '#CB333B',
const QDR_EFFECT = {
durationShortest: '150ms',
durationShorter: '200ms',
durationShort: '250ms',
durationStandard: '300ms',
durationLong: '375ms',
durationLonger: '450ms',
durationLongest: '600ms',
easingStandard: 'cubic-bezier(0.58, 0.01, 0.29, 1.01)',
easingEmphasized: 'cubic-bezier(0.83, 0, 0.17, 1)',
easingDecelerated: 'cubic-bezier(0, 0, 0.3, 1)',
easingAccelerated: 'cubic-bezier(0.32, 0, 0.67, 0)',
'shadow-xs': '0px 2px 6px 0px rgba(0, 0, 0, 0.08), 0px 1px 2px 0px rgba(0, 0, 0, 0.01)',
'shadow-s': '0px 4px 8px -2px rgba(0, 0, 0, 0.10), 0px 2px 4px -2px rgba(0, 0, 0, 0.04)',
'shadow-m': '0px 12px 16px -4px rgba(0, 0, 0, 0.08), 0px 4px 6px -2px rgba(0, 0, 0, 0.03)',
'shadow-l': '0px 20px 24px -4px rgba(0, 0, 0, 0.08), 0px 8px 8px -4px rgba(0, 0, 0, 0.03)',
'shadow-xl': '0px 24px 48px -12px rgba(0, 0, 0, 0.18), 0px 4px 8px 2px rgba(0, 0, 0, 0.04)',
'shadow-2xl': '0px 32px 64px -12px rgba(0, 0, 0, 0.25), 0px 4px 8px 2px rgba(0, 0, 0, 0.04)',
};
const THEME_QDR_DARK = Object.assign(Object.assign({}, THEME_QDR), { background: '#212121', surface: '#000', text: '#fff', border: '#4a4a4a', divider: '#636363', placeholder: '#e0e0e0', icon: '#9e9e9e', sup: '#CB333B' });
const QDR_SPACING = {
'spacing-0': '0rem',
'spacing-1': '0.165rem',
'spacing-2': '0.25rem',
'spacing-3': '0.375rem',
'spacing-4': '0.5rem',
'spacing-5': '0.625rem',
'spacing-6': '0.75rem',
'spacing-7': '1rem',
'spacing-8': '1.25rem',
'spacing-9': '1.5rem',
'spacing-10': '1.75rem',
'spacing-11': '2rem',
'spacing-12': '2.25rem',
'spacing-13': '2.5rem',
'spacing-14': '3rem',
'spacing-18': '5rem',
'spacing-19': '6rem',
'spacing-21': '7.5rem',
'spacing-24': '10rem',
'spacing-25': '12.5rem',
'spacing-27': '16rem',
'spacing-28': '17.5rem',
'spacing-30': '22.5rem',
'radius-1': '0.25rem',
'radius-2': '0.375rem',
'radius-3': '0.5rem',
'radius-4': '0.625rem',
'radius-5': '0.75rem',
'radius-6': '1rem',
'modal-size-s': '420px',
'modal-size-m': '540px',
'modal-size-l': '720px',
'modal-size-xl': '100%',
typographyArticleH1FontSize: '2rem',
typographyArticleH1LineHeight: '1.4',
typographyArticleH1LetterSpacing: '0',
typographyArticleH1FontWeight: '600',
typographyArticleH2FontSize: '1.5rem',
typographyArticleH2LineHeight: '1.4',
typographyArticleH2LetterSpacing: '0',
typographyArticleH2FontWeight: '600',
typographyArticleH3FontSize: '1.3125rem',
typographyArticleH3LineHeight: '1.45',
typographyArticleH3LetterSpacing: '0',
typographyArticleH3FontWeight: '600',
typographyArticleH4FontSize: '1.125rem',
typographyArticleH4LineHeight: '1.45',
typographyArticleH4LetterSpacing: '0',
typographyArticleH4FontWeight: '600',
typographyArticleH5FontSize: '1rem',
typographyArticleH5LineHeight: '1.5',
typographyArticleH5LetterSpacing: '0',
typographyArticleH5FontWeight: '600',
typographyArticleH6FontSize: '0.8125rem',
typographyArticleH6LineHeight: '1.5',
typographyArticleH6LetterSpacing: '0',
typographyArticleH6FontWeight: '600',
typographyArticleSubtitle1FontSize: '1rem',
typographyArticleSubtitle1LineHeight: '1.5',
typographyArticleSubtitle1LetterSpacing: '0',
typographyArticleSubtitle1FontWeight: '400',
typographyArticleBody1FontSize: '1rem',
typographyArticleBody1LineHeight: '1.65',
typographyArticleBody1LetterSpacing: '0',
typographyArticleBody1FontWeight: '400',
typographyArticleBody2FontSize: '0.8125rem',
typographyArticleBody2LineHeight: '1.7',
typographyArticleBody2LetterSpacing: '0',
typographyArticleBody2FontWeight: '400',
typographyBasicH1FontSize: '2rem',
typographyBasicH1LineHeight: '1.5',
typographyBasicH1LetterSpacing: '0',
typographyBasicH1FontWeight: '600',
typographyBasicH2FontSize: '1.5rem',
typographyBasicH2LineHeight: '1.5',
typographyBasicH2LetterSpacing: '0',
typographyBasicH2FontWeight: '600',
typographyBasicH3FontSize: '1.3125rem',
typographyBasicH3LineHeight: '1.45',
typographyBasicH3LetterSpacing: '0',
typographyBasicH3FontWeight: '500',
typographyBasicH4FontSize: '1.125rem',
typographyBasicH4LineHeight: '1.55',
typographyBasicH4LetterSpacing: '0',
typographyBasicH4FontWeight: '500',
typographyBasicH5FontSize: '0.9375rem',
typographyBasicH5LineHeight: '1.6',
typographyBasicH5LetterSpacing: '0',
typographyBasicH5FontWeight: '500',
typographyBasicH6FontSize: '0.8125rem',
typographyBasicH6LineHeight: '1.5',
typographyBasicH6LetterSpacing: '0',
typographyBasicH6FontWeight: '500',
typographyBasicButton1FontSize: '0.9375rem',
typographyBasicButton1LineHeight: '2.65',
typographyBasicButton1LetterSpacing: '0',
typographyBasicButton1FontWeight: '500',
typographyBasicButton2FontSize: '0.9375rem',
typographyBasicButton2LineHeight: '2.15',
typographyBasicButton2LetterSpacing: '0',
typographyBasicButton2FontWeight: '500',
typographyBasicButton3FontSize: '0.8125rem',
typographyBasicButton3LineHeight: '1.85',
typographyBasicButton3LetterSpacing: '0',
typographyBasicButton3FontWeight: '500',
typographyBasicInput1FontSize: '0.9375rem',
typographyBasicInput1LineHeight: '2.65',
typographyBasicInput1LetterSpacing: '0',
typographyBasicInput1FontWeight: '400',
typographyBasicInput2FontSize: '0.9375rem',
typographyBasicInput2LineHeight: '2.15',
typographyBasicInput2LetterSpacing: '0',
typographyBasicInput2FontWeight: '400',
typographyBasicInput3FontSize: '0.8125rem',
typographyBasicInput3LineHeight: '1.85',
typographyBasicInput3LetterSpacing: '0',
typographyBasicInput3FontWeight: '400',
typographyBasicBody1FontSize: '0.9375rem',
typographyBasicBody1LineHeight: '1.6',
typographyBasicBody1LetterSpacing: '0',
typographyBasicBody1FontWeight: '400',
typographyBasicBody2FontSize: '0.8125rem',
typographyBasicBody2LineHeight: '1.5',
typographyBasicBody2LetterSpacing: '0',
typographyBasicBody2FontWeight: '400',
typographyBasicCaptionFontSize: '0.75rem',
typographyBasicCaptionLineHeight: '1.35',
typographyBasicCaptionLetterSpacing: '0',
typographyBasicCaptionFontWeight: '400',
};
const THEME_QDR = Object.assign(Object.assign({ primary: '#465bc7', primaryLight: '#778de8', primaryDark: '#2d2d9e', onPrimary: '#fff', primaryHoverBg: '#778de826', primaryActiveBg: '#465bc733', secondary: '#383838', secondaryLight: '#6a6a6a', secondaryDark: '#161616', onSecondary: '#fff', secondaryHoverBg: '#6a6a6a26', secondaryActiveBg: '#38383833', error: '#fb414a', errorLight: '#ff6461', errorDark: '#cf1322', onError: '#fff', errorHoverBg: '#ff646126', errorActiveBg: '#fb414a33', warning: '#f7ac38', warningLight: '#fdd948', warningDark: '#f1842b', onWarning: '#fff', warningHoverBg: '#fdd94826', warningActiveBg: '#f7ac3833', success: '#00b42a', successLight: '#23c343', successDark: '#009a29', onSuccess: '#fff', successHoverBg: '#00b42a26', successActiveBg: '#23c34333', textPrimary: '#161616', textSecondary: '#8f8f8f', textDisabled: '#bcbcbc', actionActive: '#161616', actionInactive: '#8f8f8f', actionDisabled: '#bcbcbc', actionDisabledBg: '#e5e5e5', surface: '#fff', block: '#fafafa', bg: '#f5f5f5', divider: '#e7e7e7', border: '#d9d9d9', overlayDark: '#16161680', overlayLight: '#ffffffe6' }, QDR_EFFECT), QDR_SPACING);
const THEME_QDR_DARK = Object.assign(Object.assign({ primary: '#4767eb', primaryLight: '#6882ef', primaryDark: '#3249a7', onPrimary: '#fff', primaryHoverBg: '#6882ef26', primaryActiveBg: '#4767eb33', secondary: '#585858', secondaryLight: '#b5b5b5', secondaryDark: '#3e3e3e', onSecondary: '#fff', secondaryHoverBg: '#b5b5b526', secondaryActiveBg: '#58585833', error: '#ff4d4f', errorLight: '#ff6d6f', errorDark: '#d94143', onError: '#fff', errorHoverBg: '#ff6d6f26', errorActiveBg: '#ff4d4f33', warning: '#f7ac38', warningLight: '#f8bb5c', warningDark: '#af7a28', onWarning: '#fff', warningHoverBg: '#f8bb5c26', warningActiveBg: '#f7ac3833', success: '#1ac61a', successLight: '#43cf43', successDark: '#128b12', onSuccess: '#fff', successHoverBg: '#43cf4326', successActiveBg: '#1ac61a33', textPrimary: '#fff', textSecondary: '#8c8c8c', textDisabled: '#595959', actionActive: '#fff', actionInactive: '#8c8c8c', actionDisabled: '#595959', actionDisabledBg: '#393939', surface: '#242424', block: '#1a1a1a', bg: '#0a0a0a', divider: '#333', border: '#434343', overlayDark: '#00000080', overlayLight: '#242424e6' }, QDR_EFFECT), QDR_SPACING);
exports.QDR_EFFECT = QDR_EFFECT;
exports.QDR_SPACING = QDR_SPACING;
exports.THEME_QDR = THEME_QDR;
exports.THEME_QDR_DARK = THEME_QDR_DARK;
+3
-1
index.d.ts

@@ -1,3 +0,5 @@

export { ThemeObject, Theme } from './typings';
export { SpacingObject, PalettesObject, ThemeObject, Theme } from './typings';
export { QDR_EFFECT } from './effect';
export { QDR_SPACING } from './spacing';
export { THEME_QDR } from './qdr';
export { THEME_QDR_DARK } from './qdr-dark';
+2
-0
index.js

@@ -0,2 +1,4 @@

export { QDR_EFFECT } from './effect.js';
export { QDR_SPACING } from './spacing.js';
export { THEME_QDR } from './qdr.js';
export { THEME_QDR_DARK } from './qdr-dark.js';
+1
-1
package.json
{
"name": "@quadrats/theme",
"version": "0.7.4",
"version": "1.0.0",
"description": "",

@@ -5,0 +5,0 @@ "author": "Rytass",

+190
-10
prebuilts/qdr-dark.css
.qdr-theme-qdr-dark {
--qdr-primary-light: #c1eef2;
--qdr-primary: #1cc1d0;
--qdr-primary-dark: #16aab8;
--qdr-background: #212121;
--qdr-surface: #000;
--qdr-text: #fff;
--qdr-border: #4a4a4a;
--qdr-divider: #636363;
--qdr-placeholder: #e0e0e0;
--qdr-icon: #9e9e9e;
--qdr-duration-shortest: 150ms;
--qdr-duration-shorter: 200ms;
--qdr-duration-short: 250ms;
--qdr-duration-standard: 300ms;
--qdr-duration-long: 375ms;
--qdr-duration-longer: 450ms;
--qdr-duration-longest: 600ms;
--qdr-easing-standard: cubic-bezier(0.58, 0.01, 0.29, 1.01);
--qdr-easing-emphasized: cubic-bezier(0.83, 0, 0.17, 1);
--qdr-easing-decelerated: cubic-bezier(0, 0, 0.3, 1);
--qdr-easing-accelerated: cubic-bezier(0.32, 0, 0.67, 0);
--qdr-shadow-xs: 0 2px 6px 0 rgba(0, 0, 0, 0.08), 0 1px 2px 0 rgba(0, 0, 0, 0.01);
--qdr-shadow-s: 0 4px 8px -2px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
--qdr-shadow-m: 0 12px 16px -4px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
--qdr-shadow-l: 0 20px 24px -4px rgba(0, 0, 0, 0.08), 0 8px 8px -4px rgba(0, 0, 0, 0.03);
--qdr-shadow-xl: 0 24px 48px -12px rgba(0, 0, 0, 0.18), 0 4px 8px 2px rgba(0, 0, 0, 0.04);
--qdr-shadow-2xl: 0 32px 64px -12px rgba(0, 0, 0, 0.25), 0 4px 8px 2px rgba(0, 0, 0, 0.04);
--qdr-primary: #4767eb;
--qdr-primary-light: #6882ef;
--qdr-primary-dark: #3249a7;
--qdr-on-primary: #fff;
--qdr-secondary: #585858;
--qdr-secondary-light: #b5b5b5;
--qdr-secondary-dark: #3e3e3e;
--qdr-on-secondary: #fff;
--qdr-error: #ff4d4f;
--qdr-error-light: #ff6d6f;
--qdr-error-dark: #d94143;
--qdr-on-error: #fff;
--qdr-warning: #f7ac38;
--qdr-warning-light: #f8bb5c;
--qdr-warning-dark: #af7a28;
--qdr-on-warning: #fff;
--qdr-success: #1ac61a;
--qdr-success-light: #43cf43;
--qdr-success-dark: #128b12;
--qdr-on-success: #fff;
--qdr-text-primary: #fff;
--qdr-text-secondary: #8c8c8c;
--qdr-text-disabled: #595959;
--qdr-action-active: #fff;
--qdr-action-inactive: #8c8c8c;
--qdr-action-disabled: #595959;
--qdr-action-disabled-bg: #393939;
--qdr-surface: #242424;
--qdr-block: #1a1a1a;
--qdr-bg: #0a0a0a;
--qdr-divider: #333;
--qdr-border: #434343;
--qdr-overlay-dark: rgba(0, 0, 0, 0.5019607843);
--qdr-overlay-light: rgba(36, 36, 36, 0.9019607843);
--qdr-spacing-0: 0;
--qdr-spacing-1: 0.165rem;
--qdr-spacing-2: 0.25rem;
--qdr-spacing-3: 0.375rem;
--qdr-spacing-4: 0.5rem;
--qdr-spacing-5: 0.625rem;
--qdr-spacing-6: 0.75rem;
--qdr-spacing-7: 1rem;
--qdr-spacing-8: 1.25rem;
--qdr-spacing-9: 1.5rem;
--qdr-spacing-10: 1.75rem;
--qdr-spacing-11: 2rem;
--qdr-spacing-12: 2.25rem;
--qdr-spacing-13: 2.5rem;
--qdr-spacing-14: 3rem;
--qdr-spacing-18: 5rem;
--qdr-spacing-19: 6rem;
--qdr-spacing-21: 7.5rem;
--qdr-spacing-24: 10rem;
--qdr-spacing-25: 12.5rem;
--qdr-spacing-27: 16rem;
--qdr-spacing-28: 17.5rem;
--qdr-spacing-30: 22.5rem;
--qdr-radius-1: 0.25rem;
--qdr-radius-2: 0.375rem;
--qdr-radius-3: 0.5rem;
--qdr-radius-4: 0.625rem;
--qdr-radius-5: 0.75rem;
--qdr-radius-6: 1rem;
--qdr-modal-size-s: 420px;
--qdr-modal-size-m: 540px;
--qdr-modal-size-l: 720px;
--qdr-modal-size-xl: 100%;
--qdr-typography-article-h1-font-size: 2rem;
--qdr-typography-article-h1-line-height: 1.4;
--qdr-typography-article-h1-letter-spacing: 0;
--qdr-typography-article-h1-font-weight: 600;
--qdr-typography-article-h2-font-size: 1.5rem;
--qdr-typography-article-h2-line-height: 1.4;
--qdr-typography-article-h2-letter-spacing: 0;
--qdr-typography-article-h2-font-weight: 600;
--qdr-typography-article-h3-font-size: 1.3125rem;
--qdr-typography-article-h3-line-height: 1.45;
--qdr-typography-article-h3-letter-spacing: 0;
--qdr-typography-article-h3-font-weight: 600;
--qdr-typography-article-h4-font-size: 1.125rem;
--qdr-typography-article-h4-line-height: 1.45;
--qdr-typography-article-h4-letter-spacing: 0;
--qdr-typography-article-h4-font-weight: 600;
--qdr-typography-article-h5-font-size: 1rem;
--qdr-typography-article-h5-line-height: 1.5;
--qdr-typography-article-h5-letter-spacing: 0;
--qdr-typography-article-h5-font-weight: 600;
--qdr-typography-article-h6-font-size: 0.8125rem;
--qdr-typography-article-h6-line-height: 1.5;
--qdr-typography-article-h6-letter-spacing: 0;
--qdr-typography-article-h6-font-weight: 600;
--qdr-typography-article-subtitle1-font-size: 1rem;
--qdr-typography-article-subtitle1-line-height: 1.5;
--qdr-typography-article-subtitle1-letter-spacing: 0;
--qdr-typography-article-subtitle1-font-weight: 400;
--qdr-typography-article-body1-font-size: 1rem;
--qdr-typography-article-body1-line-height: 1.65;
--qdr-typography-article-body1-letter-spacing: 0;
--qdr-typography-article-body1-font-weight: 400;
--qdr-typography-article-body2-font-size: 0.8125rem;
--qdr-typography-article-body2-line-height: 1.7;
--qdr-typography-article-body2-letter-spacing: 0;
--qdr-typography-article-body2-font-weight: 400;
--qdr-typography-basic-h1-font-size: 2rem;
--qdr-typography-basic-h1-line-height: 1.5;
--qdr-typography-basic-h1-letter-spacing: 0;
--qdr-typography-basic-h1-font-weight: 600;
--qdr-typography-basic-h2-font-size: 1.5rem;
--qdr-typography-basic-h2-line-height: 1.5;
--qdr-typography-basic-h2-letter-spacing: 0;
--qdr-typography-basic-h2-font-weight: 600;
--qdr-typography-basic-h3-font-size: 1.3125rem;
--qdr-typography-basic-h3-line-height: 1.45;
--qdr-typography-basic-h3-letter-spacing: 0;
--qdr-typography-basic-h3-font-weight: 500;
--qdr-typography-basic-h4-font-size: 1.125rem;
--qdr-typography-basic-h4-line-height: 1.55;
--qdr-typography-basic-h4-letter-spacing: 0;
--qdr-typography-basic-h4-font-weight: 500;
--qdr-typography-basic-h5-font-size: 0.9375rem;
--qdr-typography-basic-h5-line-height: 1.6;
--qdr-typography-basic-h5-letter-spacing: 0;
--qdr-typography-basic-h5-font-weight: 500;
--qdr-typography-basic-h6-font-size: 0.8125rem;
--qdr-typography-basic-h6-line-height: 1.5;
--qdr-typography-basic-h6-letter-spacing: 0;
--qdr-typography-basic-h6-font-weight: 500;
--qdr-typography-basic-button1-font-size: 0.9375rem;
--qdr-typography-basic-button1-line-height: 2.65;
--qdr-typography-basic-button1-letter-spacing: 0;
--qdr-typography-basic-button1-font-weight: 500;
--qdr-typography-basic-button2-font-size: 0.9375rem;
--qdr-typography-basic-button2-line-height: 2.15;
--qdr-typography-basic-button2-letter-spacing: 0;
--qdr-typography-basic-button2-font-weight: 500;
--qdr-typography-basic-button3-font-size: 0.8125rem;
--qdr-typography-basic-button3-line-height: 1.85;
--qdr-typography-basic-button3-letter-spacing: 0;
--qdr-typography-basic-button3-font-weight: 500;
--qdr-typography-basic-input1-font-size: 0.9375rem;
--qdr-typography-basic-input1-line-height: 2.65;
--qdr-typography-basic-input1-letter-spacing: 0;
--qdr-typography-basic-input1-font-weight: 400;
--qdr-typography-basic-input2-font-size: 0.9375rem;
--qdr-typography-basic-input2-line-height: 2.15;
--qdr-typography-basic-input2-letter-spacing: 0;
--qdr-typography-basic-input2-font-weight: 400;
--qdr-typography-basic-input3-font-size: 0.8125rem;
--qdr-typography-basic-input3-line-height: 1.85;
--qdr-typography-basic-input3-letter-spacing: 0;
--qdr-typography-basic-input3-font-weight: 400;
--qdr-typography-basic-body1-font-size: 0.9375rem;
--qdr-typography-basic-body1-line-height: 1.6;
--qdr-typography-basic-body1-letter-spacing: 0;
--qdr-typography-basic-body1-font-weight: 400;
--qdr-typography-basic-body2-font-size: 0.8125rem;
--qdr-typography-basic-body2-line-height: 1.5;
--qdr-typography-basic-body2-letter-spacing: 0;
--qdr-typography-basic-body2-font-weight: 400;
--qdr-typography-basic-caption-font-size: 0.75rem;
--qdr-typography-basic-caption-line-height: 1.35;
--qdr-typography-basic-caption-letter-spacing: 0;
--qdr-typography-basic-caption-font-weight: 400;
--qdr-primary-hover-bg: rgba(104, 130, 239, 0.15);
--qdr-primary-active-bg: rgba(71, 103, 235, 0.2);
--qdr-secondary-hover-bg: rgba(181, 181, 181, 0.15);
--qdr-secondary-active-bg: rgba(88, 88, 88, 0.2);
--qdr-error-hover-bg: rgba(255, 109, 111, 0.15);
--qdr-error-active-bg: rgba(255, 77, 79, 0.2);
--qdr-warning-hover-bg: rgba(248, 187, 92, 0.15);
--qdr-warning-active-bg: rgba(247, 172, 56, 0.2);
--qdr-success-hover-bg: rgba(67, 207, 67, 0.15);
--qdr-success-active-bg: rgba(26, 198, 26, 0.2);
}
/*# sourceMappingURL=qdr-dark.css.map */
+1
-1
prebuilts/qdr-dark.css.map

@@ -1,1 +0,1 @@

{"version":3,"sourceRoot":"","sources":["../theming/_register.scss"],"names":[],"mappings":"AACE;EAEI;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA","file":"qdr-dark.css"}
{"version":3,"sourceRoot":"","sources":["../theming/_register.scss"],"names":[],"mappings":"AAsBE;EAWI;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA","file":"qdr-dark.css"}
+189
-9
prebuilts/qdr.css
.qdr-theme-qdr {
--qdr-primary-light: #c1eef2;
--qdr-primary: #1cc1d0;
--qdr-primary-dark: #16aab8;
--qdr-background: #f5f5f5;
--qdr-duration-shortest: 150ms;
--qdr-duration-shorter: 200ms;
--qdr-duration-short: 250ms;
--qdr-duration-standard: 300ms;
--qdr-duration-long: 375ms;
--qdr-duration-longer: 450ms;
--qdr-duration-longest: 600ms;
--qdr-easing-standard: cubic-bezier(0.58, 0.01, 0.29, 1.01);
--qdr-easing-emphasized: cubic-bezier(0.83, 0, 0.17, 1);
--qdr-easing-decelerated: cubic-bezier(0, 0, 0.3, 1);
--qdr-easing-accelerated: cubic-bezier(0.32, 0, 0.67, 0);
--qdr-shadow-xs: 0 2px 6px 0 rgba(0, 0, 0, 0.08), 0 1px 2px 0 rgba(0, 0, 0, 0.01);
--qdr-shadow-s: 0 4px 8px -2px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
--qdr-shadow-m: 0 12px 16px -4px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
--qdr-shadow-l: 0 20px 24px -4px rgba(0, 0, 0, 0.08), 0 8px 8px -4px rgba(0, 0, 0, 0.03);
--qdr-shadow-xl: 0 24px 48px -12px rgba(0, 0, 0, 0.18), 0 4px 8px 2px rgba(0, 0, 0, 0.04);
--qdr-shadow-2xl: 0 32px 64px -12px rgba(0, 0, 0, 0.25), 0 4px 8px 2px rgba(0, 0, 0, 0.04);
--qdr-primary: #465bc7;
--qdr-primary-light: #778de8;
--qdr-primary-dark: #2d2d9e;
--qdr-on-primary: #fff;
--qdr-secondary: #383838;
--qdr-secondary-light: #6a6a6a;
--qdr-secondary-dark: #161616;
--qdr-on-secondary: #fff;
--qdr-error: #fb414a;
--qdr-error-light: #ff6461;
--qdr-error-dark: #cf1322;
--qdr-on-error: #fff;
--qdr-warning: #f7ac38;
--qdr-warning-light: #fdd948;
--qdr-warning-dark: #f1842b;
--qdr-on-warning: #fff;
--qdr-success: #00b42a;
--qdr-success-light: #23c343;
--qdr-success-dark: #009a29;
--qdr-on-success: #fff;
--qdr-text-primary: #161616;
--qdr-text-secondary: #8f8f8f;
--qdr-text-disabled: #bcbcbc;
--qdr-action-active: #161616;
--qdr-action-inactive: #8f8f8f;
--qdr-action-disabled: #bcbcbc;
--qdr-action-disabled-bg: #e5e5e5;
--qdr-surface: #fff;
--qdr-text: #000;
--qdr-border: #e0e0e0;
--qdr-divider: #c1c1c1;
--qdr-placeholder: #4a4a4a;
--qdr-icon: #7d7d7d;
--qdr-block: #fafafa;
--qdr-bg: #f5f5f5;
--qdr-divider: #e7e7e7;
--qdr-border: #d9d9d9;
--qdr-overlay-dark: rgba(22, 22, 22, 0.5019607843);
--qdr-overlay-light: rgba(255, 255, 255, 0.9019607843);
--qdr-spacing-0: 0;
--qdr-spacing-1: 0.165rem;
--qdr-spacing-2: 0.25rem;
--qdr-spacing-3: 0.375rem;
--qdr-spacing-4: 0.5rem;
--qdr-spacing-5: 0.625rem;
--qdr-spacing-6: 0.75rem;
--qdr-spacing-7: 1rem;
--qdr-spacing-8: 1.25rem;
--qdr-spacing-9: 1.5rem;
--qdr-spacing-10: 1.75rem;
--qdr-spacing-11: 2rem;
--qdr-spacing-12: 2.25rem;
--qdr-spacing-13: 2.5rem;
--qdr-spacing-14: 3rem;
--qdr-spacing-18: 5rem;
--qdr-spacing-19: 6rem;
--qdr-spacing-21: 7.5rem;
--qdr-spacing-24: 10rem;
--qdr-spacing-25: 12.5rem;
--qdr-spacing-27: 16rem;
--qdr-spacing-28: 17.5rem;
--qdr-spacing-30: 22.5rem;
--qdr-radius-1: 0.25rem;
--qdr-radius-2: 0.375rem;
--qdr-radius-3: 0.5rem;
--qdr-radius-4: 0.625rem;
--qdr-radius-5: 0.75rem;
--qdr-radius-6: 1rem;
--qdr-modal-size-s: 420px;
--qdr-modal-size-m: 540px;
--qdr-modal-size-l: 720px;
--qdr-modal-size-xl: 100%;
--qdr-typography-article-h1-font-size: 2rem;
--qdr-typography-article-h1-line-height: 1.4;
--qdr-typography-article-h1-letter-spacing: 0;
--qdr-typography-article-h1-font-weight: 600;
--qdr-typography-article-h2-font-size: 1.5rem;
--qdr-typography-article-h2-line-height: 1.4;
--qdr-typography-article-h2-letter-spacing: 0;
--qdr-typography-article-h2-font-weight: 600;
--qdr-typography-article-h3-font-size: 1.3125rem;
--qdr-typography-article-h3-line-height: 1.45;
--qdr-typography-article-h3-letter-spacing: 0;
--qdr-typography-article-h3-font-weight: 600;
--qdr-typography-article-h4-font-size: 1.125rem;
--qdr-typography-article-h4-line-height: 1.45;
--qdr-typography-article-h4-letter-spacing: 0;
--qdr-typography-article-h4-font-weight: 600;
--qdr-typography-article-h5-font-size: 1rem;
--qdr-typography-article-h5-line-height: 1.5;
--qdr-typography-article-h5-letter-spacing: 0;
--qdr-typography-article-h5-font-weight: 600;
--qdr-typography-article-h6-font-size: 0.8125rem;
--qdr-typography-article-h6-line-height: 1.5;
--qdr-typography-article-h6-letter-spacing: 0;
--qdr-typography-article-h6-font-weight: 600;
--qdr-typography-article-subtitle1-font-size: 1rem;
--qdr-typography-article-subtitle1-line-height: 1.5;
--qdr-typography-article-subtitle1-letter-spacing: 0;
--qdr-typography-article-subtitle1-font-weight: 400;
--qdr-typography-article-body1-font-size: 1rem;
--qdr-typography-article-body1-line-height: 1.65;
--qdr-typography-article-body1-letter-spacing: 0;
--qdr-typography-article-body1-font-weight: 400;
--qdr-typography-article-body2-font-size: 0.8125rem;
--qdr-typography-article-body2-line-height: 1.7;
--qdr-typography-article-body2-letter-spacing: 0;
--qdr-typography-article-body2-font-weight: 400;
--qdr-typography-basic-h1-font-size: 2rem;
--qdr-typography-basic-h1-line-height: 1.5;
--qdr-typography-basic-h1-letter-spacing: 0;
--qdr-typography-basic-h1-font-weight: 600;
--qdr-typography-basic-h2-font-size: 1.5rem;
--qdr-typography-basic-h2-line-height: 1.5;
--qdr-typography-basic-h2-letter-spacing: 0;
--qdr-typography-basic-h2-font-weight: 600;
--qdr-typography-basic-h3-font-size: 1.3125rem;
--qdr-typography-basic-h3-line-height: 1.45;
--qdr-typography-basic-h3-letter-spacing: 0;
--qdr-typography-basic-h3-font-weight: 500;
--qdr-typography-basic-h4-font-size: 1.125rem;
--qdr-typography-basic-h4-line-height: 1.55;
--qdr-typography-basic-h4-letter-spacing: 0;
--qdr-typography-basic-h4-font-weight: 500;
--qdr-typography-basic-h5-font-size: 0.9375rem;
--qdr-typography-basic-h5-line-height: 1.6;
--qdr-typography-basic-h5-letter-spacing: 0;
--qdr-typography-basic-h5-font-weight: 500;
--qdr-typography-basic-h6-font-size: 0.8125rem;
--qdr-typography-basic-h6-line-height: 1.5;
--qdr-typography-basic-h6-letter-spacing: 0;
--qdr-typography-basic-h6-font-weight: 500;
--qdr-typography-basic-button1-font-size: 0.9375rem;
--qdr-typography-basic-button1-line-height: 2.65;
--qdr-typography-basic-button1-letter-spacing: 0;
--qdr-typography-basic-button1-font-weight: 500;
--qdr-typography-basic-button2-font-size: 0.9375rem;
--qdr-typography-basic-button2-line-height: 2.15;
--qdr-typography-basic-button2-letter-spacing: 0;
--qdr-typography-basic-button2-font-weight: 500;
--qdr-typography-basic-button3-font-size: 0.8125rem;
--qdr-typography-basic-button3-line-height: 1.85;
--qdr-typography-basic-button3-letter-spacing: 0;
--qdr-typography-basic-button3-font-weight: 500;
--qdr-typography-basic-input1-font-size: 0.9375rem;
--qdr-typography-basic-input1-line-height: 2.65;
--qdr-typography-basic-input1-letter-spacing: 0;
--qdr-typography-basic-input1-font-weight: 400;
--qdr-typography-basic-input2-font-size: 0.9375rem;
--qdr-typography-basic-input2-line-height: 2.15;
--qdr-typography-basic-input2-letter-spacing: 0;
--qdr-typography-basic-input2-font-weight: 400;
--qdr-typography-basic-input3-font-size: 0.8125rem;
--qdr-typography-basic-input3-line-height: 1.85;
--qdr-typography-basic-input3-letter-spacing: 0;
--qdr-typography-basic-input3-font-weight: 400;
--qdr-typography-basic-body1-font-size: 0.9375rem;
--qdr-typography-basic-body1-line-height: 1.6;
--qdr-typography-basic-body1-letter-spacing: 0;
--qdr-typography-basic-body1-font-weight: 400;
--qdr-typography-basic-body2-font-size: 0.8125rem;
--qdr-typography-basic-body2-line-height: 1.5;
--qdr-typography-basic-body2-letter-spacing: 0;
--qdr-typography-basic-body2-font-weight: 400;
--qdr-typography-basic-caption-font-size: 0.75rem;
--qdr-typography-basic-caption-line-height: 1.35;
--qdr-typography-basic-caption-letter-spacing: 0;
--qdr-typography-basic-caption-font-weight: 400;
--qdr-primary-hover-bg: rgba(119, 141, 232, 0.15);
--qdr-primary-active-bg: rgba(70, 91, 199, 0.2);
--qdr-secondary-hover-bg: rgba(106, 106, 106, 0.15);
--qdr-secondary-active-bg: rgba(56, 56, 56, 0.2);
--qdr-error-hover-bg: rgba(255, 100, 97, 0.15);
--qdr-error-active-bg: rgba(251, 65, 74, 0.2);
--qdr-warning-hover-bg: rgba(253, 217, 72, 0.15);
--qdr-warning-active-bg: rgba(247, 172, 56, 0.2);
--qdr-success-hover-bg: rgba(35, 195, 67, 0.15);
--qdr-success-active-bg: rgba(0, 180, 42, 0.2);
}
/*# sourceMappingURL=qdr.css.map */
+1
-1
prebuilts/qdr.css.map

@@ -1,1 +0,1 @@

{"version":3,"sourceRoot":"","sources":["../theming/_register.scss"],"names":[],"mappings":"AACE;EAEI;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA","file":"qdr.css"}
{"version":3,"sourceRoot":"","sources":["../theming/_register.scss"],"names":[],"mappings":"AAsBE;EAWI;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA","file":"qdr.css"}
+3
-2
qdr-dark.js

@@ -1,5 +0,6 @@

import { THEME_QDR } from './qdr.js';
import { QDR_EFFECT } from './effect.js';
import { QDR_SPACING } from './spacing.js';
const THEME_QDR_DARK = Object.assign(Object.assign({}, THEME_QDR), { background: '#212121', surface: '#000', text: '#fff', border: '#4a4a4a', divider: '#636363', placeholder: '#e0e0e0', icon: '#9e9e9e', sup: '#CB333B' });
const THEME_QDR_DARK = Object.assign(Object.assign({ primary: '#4767eb', primaryLight: '#6882ef', primaryDark: '#3249a7', onPrimary: '#fff', primaryHoverBg: '#6882ef26', primaryActiveBg: '#4767eb33', secondary: '#585858', secondaryLight: '#b5b5b5', secondaryDark: '#3e3e3e', onSecondary: '#fff', secondaryHoverBg: '#b5b5b526', secondaryActiveBg: '#58585833', error: '#ff4d4f', errorLight: '#ff6d6f', errorDark: '#d94143', onError: '#fff', errorHoverBg: '#ff6d6f26', errorActiveBg: '#ff4d4f33', warning: '#f7ac38', warningLight: '#f8bb5c', warningDark: '#af7a28', onWarning: '#fff', warningHoverBg: '#f8bb5c26', warningActiveBg: '#f7ac3833', success: '#1ac61a', successLight: '#43cf43', successDark: '#128b12', onSuccess: '#fff', successHoverBg: '#43cf4326', successActiveBg: '#1ac61a33', textPrimary: '#fff', textSecondary: '#8c8c8c', textDisabled: '#595959', actionActive: '#fff', actionInactive: '#8c8c8c', actionDisabled: '#595959', actionDisabledBg: '#393939', surface: '#242424', block: '#1a1a1a', bg: '#0a0a0a', divider: '#333', border: '#434343', overlayDark: '#00000080', overlayLight: '#242424e6' }, QDR_EFFECT), QDR_SPACING);
export { THEME_QDR_DARK };
+4
-13
qdr.js

@@ -1,15 +0,6 @@

const THEME_QDR = {
primaryLight: '#c1eef2',
primary: '#1cc1d0',
primaryDark: '#16aab8',
background: '#f5f5f5',
surface: '#fff',
text: '#000',
border: '#e0e0e0',
divider: '#c1c1c1',
placeholder: '#4a4a4a',
icon: '#7d7d7d',
sup: '#CB333B',
};
import { QDR_EFFECT } from './effect.js';
import { QDR_SPACING } from './spacing.js';
const THEME_QDR = Object.assign(Object.assign({ primary: '#465bc7', primaryLight: '#778de8', primaryDark: '#2d2d9e', onPrimary: '#fff', primaryHoverBg: '#778de826', primaryActiveBg: '#465bc733', secondary: '#383838', secondaryLight: '#6a6a6a', secondaryDark: '#161616', onSecondary: '#fff', secondaryHoverBg: '#6a6a6a26', secondaryActiveBg: '#38383833', error: '#fb414a', errorLight: '#ff6461', errorDark: '#cf1322', onError: '#fff', errorHoverBg: '#ff646126', errorActiveBg: '#fb414a33', warning: '#f7ac38', warningLight: '#fdd948', warningDark: '#f1842b', onWarning: '#fff', warningHoverBg: '#fdd94826', warningActiveBg: '#f7ac3833', success: '#00b42a', successLight: '#23c343', successDark: '#009a29', onSuccess: '#fff', successHoverBg: '#00b42a26', successActiveBg: '#23c34333', textPrimary: '#161616', textSecondary: '#8f8f8f', textDisabled: '#bcbcbc', actionActive: '#161616', actionInactive: '#8f8f8f', actionDisabled: '#bcbcbc', actionDisabledBg: '#e5e5e5', surface: '#fff', block: '#fafafa', bg: '#f5f5f5', divider: '#e7e7e7', border: '#d9d9d9', overlayDark: '#16161680', overlayLight: '#ffffffe6' }, QDR_EFFECT), QDR_SPACING);
export { THEME_QDR };
+87
-23
theming/_palettes.scss

@@ -1,27 +0,91 @@

@use 'sass:map';
$palette-light: (
primary: #465bc7,
primary-light: #778de8,
primary-dark: #2d2d9e,
on-primary: #fff,
$qdr-palette-qdr: (
primary-light: #c1eef2,
primary: #1cc1d0,
primary-dark: #16aab8,
background: #f5f5f5,
secondary: #383838,
secondary-light: #6a6a6a,
secondary-dark: #161616,
on-secondary: #fff,
error: #fb414a,
error-light: #ff6461,
error-dark: #cf1322,
on-error: #fff,
warning: #f7ac38,
warning-light: #fdd948,
warning-dark: #f1842b,
on-warning: #fff,
success: #00b42a,
success-light: #23c343,
success-dark: #009a29,
on-success: #fff,
text-primary: #161616,
text-secondary: #8f8f8f,
text-disabled: #bcbcbc,
action-active: #161616,
action-inactive: #8f8f8f,
action-disabled: #bcbcbc,
action-disabled-bg: #e5e5e5,
surface: #fff,
text: #000,
border: #e0e0e0,
divider: #c1c1c1,
placeholder: #4a4a4a,
icon: #7d7d7d
block: #fafafa,
bg: #f5f5f5,
divider: #e7e7e7,
border: #d9d9d9,
overlay-dark: #16161680,
overlay-light: #ffffffe6,
);
$qdr-palette-qdr-dark: map.merge(
$qdr-palette-qdr,
(
background: #212121,
surface: #000,
text: #fff,
border: #4a4a4a,
divider: #636363,
placeholder: #e0e0e0,
icon: #9e9e9e
)
);
$palette-dark: (
primary: #4767eb,
primary-light: #6882ef,
primary-dark: #3249a7,
on-primary: #fff,
secondary: #585858,
secondary-light: #b5b5b5,
secondary-dark: #3e3e3e,
on-secondary: #fff,
error: #ff4d4f,
error-light: #ff6d6f,
error-dark: #d94143,
on-error: #fff,
warning: #f7ac38,
warning-light: #f8bb5c,
warning-dark: #af7a28,
on-warning: #fff,
success: #1ac61a,
success-light: #43cf43,
success-dark: #128b12,
on-success: #fff,
text-primary: #fff,
text-secondary: #8c8c8c,
text-disabled: #595959,
action-active: #fff,
action-inactive: #8c8c8c,
action-disabled: #595959,
action-disabled-bg: #393939,
surface: #242424,
block: #1a1a1a,
bg: #0a0a0a,
divider: #333,
border: #434343,
overlay-dark: #00000080,
overlay-light: #242424e6,
);
+33
-3
theming/_register.scss

@@ -1,7 +0,37 @@

@mixin qdr-theme($name, $palette) {
@use 'sass:map';
@use 'sass:color';
@function _get-main-color-transformed-palette($name, $palette) {
$light-color: map.get($palette, '#{$name}-light');
$main-color: map.get($palette, $name);
@return (
'#{$name}-hover-bg': color.change($light-color, $alpha: 0.15),
'#{$name}-active-bg': color.change($main-color, $alpha: 0.2)
);
}
@function assign($map, $maps...) {
@each $m in $maps {
$map: map.merge($map, $m);
}
@return $map;
}
@mixin qdr-theme($name, $styles) {
.qdr-theme-#{$name} {
@each $name, $color in $palette {
--qdr-#{$name}: #{$color};
$default-styles: assign(
$styles,
_get-main-color-transformed-palette(primary, $styles),
_get-main-color-transformed-palette(secondary, $styles),
_get-main-color-transformed-palette(error, $styles),
_get-main-color-transformed-palette(warning, $styles),
_get-main-color-transformed-palette(success, $styles)
);
@each $name, $value in $default-styles {
--qdr-#{$name}: #{$value};
}
}
}
+192
-8
typings.d.ts

@@ -1,14 +0,198 @@

export interface ThemeObject {
export interface EffectObject {
durationShortest: string;
durationShorter: string;
durationShort: string;
durationStandard: string;
durationLong: string;
durationLonger: string;
durationLongest: string;
easingStandard: string;
easingEmphasized: string;
easingDecelerated: string;
easingAccelerated: string;
'shadow-xs': string;
'shadow-s': string;
'shadow-m': string;
'shadow-l': string;
'shadow-xl': string;
'shadow-2xl': string;
}
export interface SpacingObject {
'spacing-0': string;
'spacing-1': string;
'spacing-2': string;
'spacing-3': string;
'spacing-4': string;
'spacing-5': string;
'spacing-6': string;
'spacing-7': string;
'spacing-8': string;
'spacing-9': string;
'spacing-10': string;
'spacing-11': string;
'spacing-12': string;
'spacing-13': string;
'spacing-14': string;
'spacing-18': string;
'spacing-19': string;
'spacing-21': string;
'spacing-24': string;
'spacing-25': string;
'spacing-27': string;
'spacing-28': string;
'spacing-30': string;
'radius-1': string;
'radius-2': string;
'radius-3': string;
'radius-4': string;
'radius-5': string;
'radius-6': string;
'modal-size-s': string;
'modal-size-m': string;
'modal-size-l': string;
'modal-size-xl': string;
typographyArticleH1FontSize: string;
typographyArticleH1LineHeight: string;
typographyArticleH1LetterSpacing: string;
typographyArticleH1FontWeight: string;
typographyArticleH2FontSize: string;
typographyArticleH2LineHeight: string;
typographyArticleH2LetterSpacing: string;
typographyArticleH2FontWeight: string;
typographyArticleH3FontSize: string;
typographyArticleH3LineHeight: string;
typographyArticleH3LetterSpacing: string;
typographyArticleH3FontWeight: string;
typographyArticleH4FontSize: string;
typographyArticleH4LineHeight: string;
typographyArticleH4LetterSpacing: string;
typographyArticleH4FontWeight: string;
typographyArticleH5FontSize: string;
typographyArticleH5LineHeight: string;
typographyArticleH5LetterSpacing: string;
typographyArticleH5FontWeight: string;
typographyArticleH6FontSize: string;
typographyArticleH6LineHeight: string;
typographyArticleH6LetterSpacing: string;
typographyArticleH6FontWeight: string;
typographyArticleSubtitle1FontSize: string;
typographyArticleSubtitle1LineHeight: string;
typographyArticleSubtitle1LetterSpacing: string;
typographyArticleSubtitle1FontWeight: string;
typographyArticleBody1FontSize: string;
typographyArticleBody1LineHeight: string;
typographyArticleBody1LetterSpacing: string;
typographyArticleBody1FontWeight: string;
typographyArticleBody2FontSize: string;
typographyArticleBody2LineHeight: string;
typographyArticleBody2LetterSpacing: string;
typographyArticleBody2FontWeight: string;
typographyBasicH1FontSize: string;
typographyBasicH1LineHeight: string;
typographyBasicH1LetterSpacing: string;
typographyBasicH1FontWeight: string;
typographyBasicH2FontSize: string;
typographyBasicH2LineHeight: string;
typographyBasicH2LetterSpacing: string;
typographyBasicH2FontWeight: string;
typographyBasicH3FontSize: string;
typographyBasicH3LineHeight: string;
typographyBasicH3LetterSpacing: string;
typographyBasicH3FontWeight: string;
typographyBasicH4FontSize: string;
typographyBasicH4LineHeight: string;
typographyBasicH4LetterSpacing: string;
typographyBasicH4FontWeight: string;
typographyBasicH5FontSize: string;
typographyBasicH5LineHeight: string;
typographyBasicH5LetterSpacing: string;
typographyBasicH5FontWeight: string;
typographyBasicH6FontSize: string;
typographyBasicH6LineHeight: string;
typographyBasicH6LetterSpacing: string;
typographyBasicH6FontWeight: string;
typographyBasicButton1FontSize: string;
typographyBasicButton1LineHeight: string;
typographyBasicButton1LetterSpacing: string;
typographyBasicButton1FontWeight: string;
typographyBasicButton2FontSize: string;
typographyBasicButton2LineHeight: string;
typographyBasicButton2LetterSpacing: string;
typographyBasicButton2FontWeight: string;
typographyBasicButton3FontSize: string;
typographyBasicButton3LineHeight: string;
typographyBasicButton3LetterSpacing: string;
typographyBasicButton3FontWeight: string;
typographyBasicInput1FontSize: string;
typographyBasicInput1LineHeight: string;
typographyBasicInput1LetterSpacing: string;
typographyBasicInput1FontWeight: string;
typographyBasicInput2FontSize: string;
typographyBasicInput2LineHeight: string;
typographyBasicInput2LetterSpacing: string;
typographyBasicInput2FontWeight: string;
typographyBasicInput3FontSize: string;
typographyBasicInput3LineHeight: string;
typographyBasicInput3LetterSpacing: string;
typographyBasicInput3FontWeight: string;
typographyBasicBody1FontSize: string;
typographyBasicBody1LineHeight: string;
typographyBasicBody1LetterSpacing: string;
typographyBasicBody1FontWeight: string;
typographyBasicBody2FontSize: string;
typographyBasicBody2LineHeight: string;
typographyBasicBody2LetterSpacing: string;
typographyBasicBody2FontWeight: string;
typographyBasicCaptionFontSize: string;
typographyBasicCaptionLineHeight: string;
typographyBasicCaptionLetterSpacing: string;
typographyBasicCaptionFontWeight: string;
}
export interface PalettesObject {
primary: string;
primaryLight: string;
primary: string;
primaryDark: string;
background: string;
onPrimary: string;
primaryHoverBg: string;
primaryActiveBg: string;
secondary: string;
secondaryLight: string;
secondaryDark: string;
onSecondary: string;
secondaryHoverBg: string;
secondaryActiveBg: string;
error: string;
errorLight: string;
errorDark: string;
onError: string;
errorHoverBg: string;
errorActiveBg: string;
warning: string;
warningLight: string;
warningDark: string;
onWarning: string;
warningHoverBg: string;
warningActiveBg: string;
success: string;
successLight: string;
successDark: string;
onSuccess: string;
successHoverBg: string;
successActiveBg: string;
textPrimary: string;
textSecondary: string;
textDisabled: string;
actionActive: string;
actionInactive: string;
actionDisabled: string;
actionDisabledBg: string;
surface: string;
text: string;
block: string;
bg: string;
divider: string;
border: string;
divider: string;
placeholder: string;
icon: string;
sup: string;
overlayDark: string;
overlayLight: string;
}
export type ThemeObject = EffectObject & PalettesObject & SpacingObject;
export type Theme = string | ThemeObject;