UNPKG

wix-style-react

Version:
154 lines (117 loc) 2.45 kB
@st-namespace "BMTextButton"; :import { -st-from: "../../../TextButton/TextButton.st.css"; -st-default: TextButton; } :import { -st-from: '../foundations/colors.st.css'; -st-named: B05, B10, B40, B50, D10, D20, D30, D80, D10-30, D10-40, D80-70, P10, P20, R10; } :import { -st-from: "../../../Foundation/stylable/typography.st.css"; -st-named: wsr-font-weight-regular, wsr-font-weight-bold; } .root { -st-extends: TextButton; color: value(B10); align-items: flex-start; } .root:hover { color: value(B05); } .root:active { color: value(B05); } .root:disabled { color: value(D10-40); } .root::prefix { padding-right: 4px; } .root::suffix { padding-left: 4px; } .root:focus-visible { box-shadow: 0 0 0 3px value(B40); } /****** Weights ******/ .root:size(tiny):weight(normal) { font-weight: value(wsr-font-weight-bold); } .root:size(small):weight(normal) { font-weight: value(wsr-font-weight-bold); } .root:size(medium):weight(normal) { font-weight: value(wsr-font-weight-bold); } .root:size(tiny):weight(thin) { font-weight: value(wsr-font-weight-regular); } .root:size(small):weight(thin) { font-weight: value(wsr-font-weight-regular); } .root:size(medium):weight(thin) { font-weight: value(wsr-font-weight-regular); } .root:size(tiny) { line-height: 16px; height: 16px; font-size: 12px; align-items: center; } .root:size(small) { line-height: 20px; height: 20px; align-items: center; } /* Skin: light */ .root:skin(light) { color: value(D80); } .root:skin(light):hover { color: value(B50); } .root:skin(light):disabled { color: value(D80-70); } /* Skin: dark */ .root:skin(dark) { color: value(D10); } .root:skin(dark):hover { color: value(D10); } .root:skin(dark):active { color: value(D10); } .root:skin(dark):size(tiny) { color: value(D20); } .root:skin(dark):size(tiny):hover { color: value(D10); } .root:skin(dark):size(tiny):active { color: value(D10); } .root:skin(dark):disabled, .root:skin(dark):disabled:hover { color: value(D10-40); } /* skin: premium */ .root:skin(premium) { color: value(P10); } .root:skin(premium):hover { color: value(P20); } .root:skin(premium):active { color: value(P10); } .root:skin(premium):disabled { color: value(D10-30); } /* skin: error */ .root:skin(destructive) { color: value(R10); } /* st-namespace-reference="../../../../../src/Themes/businessDashboard/components/TextButton.st.css" */