wix-style-react/dist/src/Heading/Heading.st.css

wix-style-react

@st-import [
  --wds-color-text-standard-primary,
  --wds-color-text-standard-primary-light,
  --wds-color-text-standard-secondary,
  --wds-font-letter-spacing-heading-5,
  --wds-font-letter-spacing-heading-6,
] from '@wix/design-system-tokens/all.st.css';

:import {
  -st-from: '../Foundation/stylable/colors.st.css';
  -st-named: THEME-TEXT-COLOR-PRIMARY, THEME-TEXT-COLOR-SECONDARY, THEME-TEXT-COLOR-PRIMARY-LIGHT
}

:import {
  -st-from: '../Foundation/stylable/typography.st.css';
  -st-named: heading-h1, heading-h2, heading-h3, heading-h4, heading-h5, heading-h6, heading-xl,
    heading-l, heading-m, heading-s, heading-t, heading-xt;
}

.root {
  -st-states:
    appearance(enum(H1, H2, H3, H4, H5, H6)),
    light(boolean),
    size(enum(extraLarge, large, medium, small, tiny, extraTiny)),
    newColorsBranding;
  font-weight: normal;
  margin: 0;
}

.root:appearance(H1) {
  -st-mixin: heading-h1;
  color: var(--wds-color-text-standard-primary, value(THEME-TEXT-COLOR-PRIMARY));
}

.root:appearance(H2) {
  -st-mixin: heading-h2;
  color: var(--wds-color-text-standard-primary, value(THEME-TEXT-COLOR-PRIMARY));
}

.root:appearance(H3) {
  -st-mixin: heading-h3;
  color: var(--wds-color-text-standard-primary, value(THEME-TEXT-COLOR-PRIMARY));
}

.root:appearance(H4) {
  -st-mixin: heading-h4;
  color: var(--wds-color-text-standard-primary, value(THEME-TEXT-COLOR-PRIMARY));
}

.root:appearance(H5) {
  -st-mixin: heading-h5;
  color: var( --wds-color-text-standard-secondary, value(THEME-TEXT-COLOR-SECONDARY));
  text-transform: uppercase;
  letter-spacing: var(--wds-font-letter-spacing-heading-5, 1px);
}

.root:appearance(H6) {
  -st-mixin: heading-h6;
  color: var(--wds-color-text-standard-primary, value(THEME-TEXT-COLOR-PRIMARY));
  text-transform: uppercase;
  letter-spacing: var(--wds-font-letter-spacing-heading-6, 1.2px);
}

.root:size(extraLarge) {
  -st-mixin: heading-xl;
  color: var(--wds-color-text-standard-primary, value(THEME-TEXT-COLOR-PRIMARY));
}

.root:size(large) {
  -st-mixin: heading-l;
  color: var(--wds-color-text-standard-primary, value(THEME-TEXT-COLOR-PRIMARY));
}

.root:size(medium) {
  -st-mixin: heading-m;
  color: var(--wds-color-text-standard-primary, value(THEME-TEXT-COLOR-PRIMARY));
}

.root:size(small) {
  -st-mixin: heading-s;
  color: var(--wds-color-text-standard-primary, value(THEME-TEXT-COLOR-PRIMARY));
}

.root:size(tiny) {
  -st-mixin: heading-t;
  color: var(--wds-color-text-standard-primary, value(THEME-TEXT-COLOR-PRIMARY));
}

.root:size(extraTiny) {
  -st-mixin: heading-xt;
  color: var(--wds-color-text-standard-primary, value(THEME-TEXT-COLOR-PRIMARY));
}

.root:light {
  color: var(--wds-color-text-standard-primary-light, value(THEME-TEXT-COLOR-PRIMARY-LIGHT));
}

/* New colors branding */
.root:newColorsBranding:appearance(H1) {
  -st-mixin: heading-xl;
}

.root:newColorsBranding:appearance(H2) {
  -st-mixin: heading-l;
}

.root:newColorsBranding:appearance(H3) {
  -st-mixin: heading-m;
}

.root:newColorsBranding:appearance(H4) {
  -st-mixin: heading-s;
}

.root:newColorsBranding:appearance(H5) {
  -st-mixin: heading-t;
  text-transform: none;
}

.root:newColorsBranding:appearance(H6) {
  -st-mixin: heading-xt;
  text-transform: none;
}

/* st-namespace-reference="../../../src/Heading/Heading.st.css" */